Horizontal Navbar using UL LI

13. Jul, 2010 6 Comments

Today I’m going to tell you a simple technique, by using this technique you can make Horizontal Navigation Bar in CSS using UL LI. Later I’ll also tell you to make Vertical Navigation Bar. For your convenience I’m also uploading Source Files.

[Download source File]

1. You will need two files, one HTML and other CSS. So first of all I’m going to take HTML file. Write these codes in HTML Body area:

<body>
<center>
<div align=”center”>
<div id=”navbarMain”>
<div>
<ul>
<li><a href=”http://www.stunningmesh.com”>Home</a></li>
</ul>
<ul>
<li><a href=”#”>Tutorials</a>
<ul>
<li><a href=”http://www.stunningmesh.com/category/tutorials/photoshop-tutorials”>Photoshop</a></li>
<li><a href=”http://www.stunningmesh.com/category/tutorials/illustrator”>Illustrator</a></li>
<li><a href=”http://www.stunningmesh.com/category/tutorials/corel-draw”>Corel Draw</a></li>
<li><a href=”http://www.stunningmesh.com/category/tutorials/flash”>Flash</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href=”#”>Free Stuff</a>
<ul>
<li><a href=”http://www.stunningmesh.com/category/free-stuff/wallpapers”>Wallpapers</a></li>
<li><a href=”http://www.stunningmesh.com/category/free-stuff/fonts”>Fonts</a></li>
<li><a href=”http://www.stunningmesh.com/category/free-stuff/icons-free-stuff”>Icons</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href=”http://www.stunningmesh.com”>StunningMesh</a></li>
</ul>

</div>
</div>
</div>
</center>
</body>

2. Now take CSS file and write these codes in it:

.background {
background-color: #CCCCCC;
margin: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.mainNavBar {
margin: 0px;
padding: 0px;
width: 500px;
}
#navbarMain {
background-color: #900;
background-attachment: scroll;
background-position: 0px 0px;
height: 40px;
}
.menu ul {
list-style:none outside none;
margin:0;
padding:0;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a {
color:#FFFFFF;
display:block;
float:left;
list-style:none outside none;
text-decoration:none;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-align: center;
padding: 10px;
}
.menu ul li a:hover {
background-attachment: scroll;
background-image: url(../img/hover.jpg);
background-position: 0 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
color: #FFFFFF;
}
.menu ul li ul {
display:none;
}
.menu ul li:hover ul {
display:block;
left:0;
position:absolute;
top:0;
}
.menu ul li:hover ul li a.hide {
color:#FFF;
background-attachment: scroll;
background-position: 0 0;
background-color: #930;
}
.menu ul li:hover ul li:hover a.hide {
color:#FFFF99;
background-attachment: scroll;
background-position: 0 0;
background-image: url(../img/hover.jpg);
}
.menu ul:hover ul {
margin-top:40px;
text-align: center;
}
.menu ul li:hover ul li a {
width: 130px;
color:#FFFFFF;
display:block;
position:relative;
text-align:left;
background-attachment: scroll;
background-color: #930;
background-position: 0 0;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}

3. Now attach this CSS with HTML file by writing these codes before </head>: