Create a simple drop down menu using CSS

If we have a small website with a simple horizontal menu, it can be very straightforward for visitors to use.

But, when a small website starts to grow, often we need to add additional menu items.
More items in a menu make it less easy to use, and less readable - it is good practise to keep the number of menu items below 7 items. If our menu consists of more elements, it starts to be confusing to our visitors.

What if we need a menu with 14 items (or even more)?

One solution to this is to create a Drop Down Menu. We want our menu be fast loading, lightweight, easy to implement, and SEO compatible so we are going to use CSS.

Building a drop down menu in Flash technology is not a good choice if we want our website to be accessible by search engines like Google. Besides, not all developers will have Flash.

Here you can learn how to create a simple, dynamic, fully customizable drop down menu using CSS and HTML.

1. Use HTML UL LI to build a list.

<ul>
    <li><a href="#">Element 1</a></li>
    <li><a href="#">Element 2</a></li>
    
	<li><a  class="sub" href="#">Element 3 - drop down menu</a>
		<ul>
			<li><a href="#">Drop down subelement 1</a></li>
			<li><a href="#">Drop down subelement 2</a></li>
			<li><a href="#">Drop down subelement 3</a></li>
			<li><a href="#">Drop down subelement 4</a></li>
			<li><a href="#">Drop down subelement 5</a></li>
		</ul>
    </li>
    
	<li><a href="#">Element 4</a></li>
	
	<li><a  class="sub" href="#">Element 5 - drop down menu</a>
		<ul>
			<li><a href="#">Drop down subelement 6</a></li>
			<li><a href="#">Drop down subelement 7</a></li>
			<li><a href="#">Drop down subelement 8</a></li>
			<li><a href="#">Drop down subelement 9</a></li>
			<li><a href="#">Drop down subelement 10</a></li>
		</ul>
    </li>
    
	<li><a href="#">Element 5</a></li>
    <li><a href="#">Element 6</a></li>
    <li><a href="#">Element 7</a></li>
</ul> 

2. To your CSS add below code:

ul li {
	position: relative;
	width:200px;
}

ul li ul {
	display: none;
} 

This will hide all sub elements. They are put to UL tag embedded in another UL tag.
See the HTML code at paragraph 1. Width of the menu element is set to 200 pixels.

3. Next we add this code.

 ul li:hover ul {
	display: block;
	position: absolute;
	left: 200px;
	top: -4px;
 } 

We set hover behaviour to our LI elements embedded in first level of UL tag.
When we hover the LI element it will display previously hidden UL element of the second level (if they exist. In our example they are located in element number 3 and 5).

Property POSITION:absolute and LEFT:200px shifts the submenu 200 pixels right, and TOP: -4px place submenu items higher.

This example will not work with Internet Explorer 6, because this old fashioned browser doesn't understand :hover property connected with anything else than a elements.

It is a common Internet Explorer 6 error. There are many ways to fix it - one is to add the onmouseover function using JavaScript.

And that's it. Below is the demo. Download it and modify it to your needs.

Useful links

• css-menu.zip