Home / Tutorials / CSS / Vertical Navbar using UL LI

Vertical Navbar using UL LI

After making Horizontal Navigation bar, I’ve made Vertical Navigation bar. I’ve tried to make it in detail, so that if you need to make a long Navigation bar so this tutorial will cover every level in it.

[Download source File]

1. First of all take an HTML file and write these codes in <BODY> area:

<body>
<ul>
<li><a href=”http://www.stunningmesh.com”>Home</a>

</li>
<li><a href=”#”>Tutorials</a>
<ul>
<li><a href=”http://www.stunningmesh.com/category/tutorials/photoshop-tutorials”>Photoshop</a>
<ul>
<li><a href=”#”>Text Effect</a></li>
<li><a href=”#”>Photo Effect</a></li>
<li><a href=”#”>Special Effect</a></li>
</ul>
</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>
<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>
<li><a href=”http://www.stunningmesh.com/category/free-stuff/shapes/”>Shapes</a></li>
</ul>
</li>
<li><a href=”http://www.stunningmesh.com”>Stunning Mesh</a>
</li>
</ul>

</body>

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

ul.nav,
.nav ul{

margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
}

ul.nav{
width: 200px;
float: left;
margin-right: 1px;
}

ul.nav a{
color: #FFF;
}
ul.nav a:hover{
color: #FF0;
}
ul.nav>li{
margin: 0;
color: #FFF;
background-color: #900;
padding-top: 5px;
padding-right: 6px;
padding-bottom: 5px;
padding-left: 6px;
font-family: Arial, Helvetica, sans-serif;
}
ul.nav li>ul>li{
margin: 0;
color: #900;
background-color: #979700;
padding-top: 5px;
padding-right: 6px;
padding-bottom: 5px;
padding-left: 6px;
}
ul.nav li>ul>li a{
color: #FFF;
}
ul.nav li>ul>li a:hover{
color: #FF0;
}
ul.nav li:hover {
background-color: #000000;
color: #FF0;
background-image: url(../images/hover.jpg);
}

ul.nav li:hover>ul{
display : block;
color: #000;
}
ul.nav li>ul{
display: none;
position: absolute;
width: 200px;
left: 200px;
margin-top: -5px;
margin-left: 11px;
color: #FFFF00;
background-color: #000000;
}

ul.nav ul>li>ul{
display: none;
position: absolute;
width: 200px;
left: 191px;
margin-top: -5px;
color: #FFFFFF;
background-color: #333333;
margin-left: 9px;
}
ul.nav ul>li>ul>li{
margin: 0;
color: #FFF;
background-color: #000;
padding-top: 5px;
padding-right: 6px;
padding-bottom: 5px;
padding-left: 6px;
}
ul.nav ul>li>ul>li a{
color: #FFF;
}
ul.nav ul li ul li a:hover {
color: #FF0;
}
ul{
border: 1px solid #000;
}
.nav a{
text-decoration: none;
}

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

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

4. Now view this file in any browser and you will get the following look:

[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 …

4 comments

  1. I like this easy way to make css menu
    thanks for sharing this

  2. thanx for sharing

Leave a Reply

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