Tue. Jan 28th, 2020

StunningMesh – Tutorials & Articles

Blog about IT, Design, Tutorial, SEO and a lot more.

Vertical Navbar Using UL LI in CSS

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.

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

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

</li>
<li><a href=”#”>Tutorials</a>
<ul>
<li><a href=”https://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=”https://www.stunningmesh.com/category/tutorials/illustrator”>Illustrator</a></li>
<li><a href=”https://www.stunningmesh.com/category/tutorials/corel-draw”>Corel Draw</a></li>
<li><a href=”https://www.stunningmesh.com/category/tutorials/flash”>Flash</a></li>
</ul>
</li>
<li><a href=”#”>Free Stuff</a>
<ul>
<li><a href=”https://www.stunningmesh.com/category/free-stuff/wallpapers”>Wallpapers</a></li>
<li><a href=”https://www.stunningmesh.com/category/free-stuff/fonts”>Fonts</a></li>
<li><a href=”https://www.stunningmesh.com/category/free-stuff/icons-free-stuff”>Icons</a></li>
<li><a href=”https://www.stunningmesh.com/category/free-stuff/shapes/”>Shapes</a></li>
</ul>
</li>
<li><a href=”https://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:

Last Updated on

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