Creating a basic menu using HTML and CSS is pretty straightforward even for starters. If you're in search for a simple navigation menu bar for your website/blog, here's all the code you need.
The CSS:
#nav {
padding:0;
background: black;
border-bottom: 1px solid #999999;
height: 36px;
}
#nav li a {
font-family: Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
color:white;
font-weight:bold;
}
#nav li a:hover {
background:white;
color:black;
border-radius: 2px;
border-bottom: 1px solid white;
}
#nav li {
display:inline;
}
The HTML:
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
Simply change the URL to your desired location.
The CSS:
#nav {
padding:0;
background: black;
border-bottom: 1px solid #999999;
height: 36px;
}
#nav li a {
font-family: Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
color:white;
font-weight:bold;
}
#nav li a:hover {
background:white;
color:black;
border-radius: 2px;
border-bottom: 1px solid white;
}
#nav li {
display:inline;
}
The HTML:
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
Simply change the URL to your desired location.