Vertical Navbar using UL LI

14. Jul, 2010 4 Comments

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: