Home / Tutorials / CSS / Horizontal Navbar using UL LI

Horizontal Navbar using UL LI

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>:

<link href=”css/123.css” rel=”stylesheet” type=”text/css”>

4. Now view this HTML file in any browser, you will find the following Navigation Bar:

[Download source File]

About Wijdan Rohail

A professional Web/Graphic Designer, working as Freelancer since 2000. Designing is my passion, blogging is my hobby.

Check Also

Slice your Mock up to make Website – Part III

This is the third and final part. In this part I would be telling you …

6 comments

  1. @Wijdan Rohail – I can forget it, but what to do with clients… ???

    They are not ready to forget it… 🙂

    Anyway thanks….

  2. Nice but will this work for IE6????

  3. short but useful tips you sharing. thanks

Leave a Reply

Your email address will not be published. Required fields are marked *