How to create a basic css horizontal drop down menu

In this tutorial, we will see how to create a basic horizontal drop down menu using unordered lists and nested lists.

We will use the css property visibility to hide the menu’s sub items and make them visible on the hover state of the buttons.

The css menu functions for the main browser of recent edition.
At the end of the article, I will explain how to adjust it to make it also works for Internet Explorer 6.

The basic html structure consists of unordered lists which contains a second list for the sub items:

<div id="menu">
<ul>
<li><a href="#nogo">Link 1</a>
<ul>
<li><a href="#nogo">Link 1-1</a></li>
<li><a href="#nogo">Link 1-2</a></li>
<li><a href="#nogo">Link 1-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 2</a>
<ul>
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 3</a>
<ul>
<li><a href="#nogo">Link 3-1</a></li>
<li><a href="#nogo">Link 3-2</a></li>
<li><a href="#nogo">Link 3-3</a></li>
</ul>
</li>
</ul>
</div>

In the following preview image, we can see our menu with no css style applied:

As the browsers have different way to interpret the margins and paddings, we specify a value of null for both properties for the menu (#menu), ul (unordered list and li (list items).
We apply a float:left; to create a basic horizontal css menu and a relative position which will next allow us to position the sub items in a absolute mode in relation to its containing element <li>. With the list-style:none;, we remove the default bullets added by default to the list:

#menu{
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}

At this point the result is as follow:

Next, the css style for the links themselves (element <a>):

• the width width:100px;
• the height height:30px;
• convert from inline element to block element display:block;
• remove the text underline added by default text-decoration:none;
• horizontal align the text link text-align: center; and vertical align line-height:30px;
• a black background color background-color:black; and a text of white color color:white;

#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}

To add a minimum of visual effect, we change the background color from black to red on the hover state of the links inside the list items (li):

#menu li a:hover{
background-color: red;
}

A detail of the result obtained:

We can now position the sub items:

We use the css properties position:absolute; to remove the sub ul from the normal flux of the page and move them of 30px (top:30px; - 30px being the height specified first) from the top towards the bottom so to place them underneath the first element.

#menu ul ul{
position: absolute;
top: 30px;

Image preview:

Using the css property visibility:hidden; we hide the sub items:

visibility: hidden;
}

Finally, we finish our horizontal drop down css menu changing the value of the property visible from hidden to visible on the hover state:

#menu ul li:hover ul{
visibility:visible;
}

Pass over the links with mouse to see the final result:

After testing this basic horizontal drop downcss menu with all the main browser (IE7, Firefox, Opera e Safari), a problem is encountered with Internet Explorer 6 for which the hover state is completely ignored and the sub items not displayed.

As many users still use Internet Explorer 6, I tried to find the easiest solution to implement without modifying the html structure and css.

I found the solution in the book Eric Meyer on CSS which use an .htc file created by Peter Nederloff.

In brief, IE6 does not support the :hover state on othe elements then for the tag <a>, which makes this drop down menu useless.
But IE supports the so-called ‘behaviors’ (ignored by FF or other moderns browsers).
Those ‘behaviors’ allows to upload a .htc file which change the comportment of elements with an hover state using eventsonmouse.
I am not a programmer(ess?), so I didn’t start studying the script included in this .htc file which can be downloaded freely from Peter Nederloff site.

I used the version csshover2.htc for this tutorial.

Back to our menu, the .htc file which will allow this drop down menu to also function for IE6 is added in the css rules to the element body, the following way:

NB: this css rule has to be added in an external css file and not in between tag style in the head of your html page

body{
behavior: url(csshover2.htc);
}

PS: for IE6 users, the .htc file is not applied to the example in this tutorial

Bookmark this css article

css drop down menu, css horizontal menu, CSS Menu, drop down menu

17 comments

Stay updated with our RSS Feed