Create a Simple Navigation Menu Bar For Your Website/Blog [Beginner]
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 Result:
Subscribe to:
Post Comments
(
Atom
)
my menu bar is going to the right side of the page iwant it to be in full page and at the center
ReplyDeleteJust add this to your CSS:
Delete#header-right {
float:none !important;
}