Horizontal Navbar Using UL LI in CSS

Categories CSS, TutorialsPosted on

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.

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=”https://www.stunningmesh.com”>Home</a></li>
</ul>
<ul>
<li><a href=”#”>Tutorials</a>
<ul>
<li><a href=”https://www.stunningmesh.com/category/tutorials/photoshop-tutorials”>Photoshop</a></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>
</ul>
<ul>
<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>
</ul>
</li>
</ul>
<ul>
<li><a href=”https://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:

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

6 comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.