Learn How to Make List Based Menu with CSS/HTML

List-Based Menu List based drop down menu is one of the most popular site ornaments, and a lot of sites are using it as their primary navigation tool. If you want to use list based menu on your site as well, follow this tutorial I’m about to present to you and create your own with CSS/HTML in a matter of minutes.

Let us start with making the list to work with. Use the following HTML code as your guide.

<div id="nav">
 
<ul>
 
<li class="first"><a href="#">Home</a></li>
 
<li><a href="#">Blog</a></li>
 
<li><a href="#">Services</a>
 
<ul>
 
<li><a href="#">SEO</a></li>
 
<li><a href="#">Internet Marketing</a></li>
 
<li><a href="#">Web Contents</a></li>
 
</ul>
 
</li>
 
<li><a href="#">Contact Us</a></li>
 
</ul>
 
</div>

You should notice the “nav” id that will be used in your CSS codes as identifier. Let us continue with setting up some basic CSS codes for your menu. First, set up the basics for #nav to lay down some ground formatting for your list based menu.

*{ margin:0px; padding: 0px; }
 
#nav {
 
font-family: arial, sans-serif;
 
position: relative;
 
width: 390px;
 
height:56px;
 
font-size:14px;
 
color:#999;
 
margin: 0 auto;
 
}
 
#nav ul {
 
list-style-type: none;
 
}

Add the following piece of CSS code to make your list based menu float. This will make integrating the menu to your site a lot easier.

#nav ul li {
 
float: left
 
position: relative;
 
}

Add the following code to your CSS to make the list clickable as a whole — instead of just the text — and add separating borders to the design. Of course, you can change colors and border settings used.

#nav ul li a {
 
text-align: center;
 
border-right:1px solid #e9e9e9;
 
padding:20px;
 
display:block;
 
text-decoration:none;
 
color:#999;
 
}

The following CSS codes will allow you to format child nodes properly and create a smooth dropdown effect.

#nav ul li ul {
 
display: none
 
}
 
#nav ul li:hover ul {
 
display: block;
 
position: absolute;
 
}

Last but not least, add the following code to your CSS to set the hover state of the nodes.

#nav ul li:hover ul li a {
 
display:block;
 
background:#12aeef;
 
color:#ffffff;
 
width: 110px;
 
text-align: center;
 
border-bottom: 1px solid #f2f2f2;
 
border-right: none;
 
}
 
#nav ul li:hover ul li a:hover {
 
background:#6dc7ec;
 
color:#fff;
 
}

When it comes to integrating the menu to your site, all you have to do is insert the CSS codes into your CSS file and add the HTML list code wherever on the page within a container. The new list based dropdown menu will be a nice addition to your already intuitive design.