Skip to content

Instantly share code, notes, and snippets.

@Techgokul

Techgokul/nav.html

Created January 16, 2018 03:56
Show Gist options
  • Save Techgokul/347203aa288f72286fdb001ebb5bd03e to your computer and use it in GitHub Desktop.
Save Techgokul/347203aa288f72286fdb001ebb5bd03e to your computer and use it in GitHub Desktop.
Download ZIP
Navigation bar Using HTML5,CSS
Raw
nav.html
<html>
<head>
<title>Navigation bar</title>
<link rel="stylesheet" href="style.css"/>
<meta charset="utf-8">
</head>
<body>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;
<img src="2.png" id="dir">
<div id="nav">
<ul>
<li>Home</li>
<li>Downloads</li>
<li>Documentaion
<ul>
<li>Download programming
<ul>
<li>c programming</li>
<li>c++ programming</li>
<li>html programming</li>
</ul>
</li>
<li>Download hacking pdf</li>
<li>Download Python pdf</li>
</ul>
</li>
<li>Contact us</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div id="para">
<p>
Explore now
</p>
</div>
</body>
</html>
Raw
style.css
body{
background-image: url("1.jpeg");
background-position: center;
background-attachment: scroll;
background-size: 1000px 1500px;
background-repeat: no-repeat;
}
*{
margin: 0px;
padding: 0px;
}
#nav ul li{
background: rgba(3, 2, 1, 0.5);
width: 150px;
border: 1px solid white;
line-height: 50px;
text-align: center;
float: left;
color: white;
font-size: 15px;
position: relative;
border-radius: 25px;
}
#nav ul li:hover{
background-color: dodgerblue;
}
#nav ul{
list-style: none;
}
#nav ul ul{
display: none;
}
#nav ul li:hover > ul{
display: block;
}
#nav ul ul ul{
margin-left: 150px;
top: 10px;
position: absolute;
}
#para{
position: absolute;
float: right;
background: rgba(255, 245, 4, 0.75);
border-radius: 15px;
padding: 0px 0px;
top: 430px;
left: 35px;
margin-left: 350px;
height: 40px;
width: 197px;
font-size: 30px;
font-family: monospace;
font-style: oblique;
font-style: italic;
text-align: center;
}
#para:hover{
background-color: rgba(8, 129, 232, 0.66);
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment