Announcement
I will update this article. Back in the days, this worked. In 2011, there are better ways, updated languages in HTML 5 + CSS 3 and many more options. Expect an article explaining this before 20 June.

Due a large stream of requests for the horizontal, drop-down version of the Vertical CSS menu tutorial, I will write a tutorial covering all the basic points of building a horizontal drop-down CSS menu!

This CSS menu will have submenus and will use the web-techniques HTML 4, CSS. In this tutorial, we use the old fashioned hover JavaScript tool.

Structure

Before we can start building an awesome design, we need to have structure. We will use HTML for that. The structure of our menu is based on a simple un-ordered list.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">Services</a>
<ul>
	<li><a href="#">Webdesign</a></li>
	<li><a href="#">Development</a></li>
	<li><a href="#">Illustration</a></li>
	<li><a href="#">Search engine</a></li>
	<li><a href="#">WordPress</a></li>
</ul>
</li>
	<li><a href="#">Blog</a>
<ul>
	<li><a href="#">Themes</a></li>
	<li><a href="#">Plugins</a></li>
</ul>
</li>
	<li><a href="#">Contact</a></li>
</ul>

The ul element is the begin and end of the un-ordered list, and the li elements are the menu-items In some of the li elements, you see another un-ordered list and these will be our drop-down submenu’s.

Make the menu Accessible

Accessibility is important. Not everyone is on the same computer with that same settings as you. Maybe they’ve disabled CSS, or any other thing that makes this menu not work.

We will add some titles to our menu items, so that when people roll over an item or visit the menu in a screenreader, they see the title popping up telling them what that item is about. Here is our more accessible structure.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<ul id="nav">
	<li><a title="Home" href="#">Home</a></li>
	<li><a title="Services" href="#">Services</a>
<ul>
	<li><a title="Services &gt; Webdesign" href="#">Webdesign</a></li>
	<li><a title="Services &gt; Developement" href="#">Development</a></li>
	<li><a title="Services &gt; Illustration" href="#">Illustration</a></li>
	<li><a title="Services &gt; Search Engine" href="#">Search engine</a></li>
	<li><a title="Services &gt; WordPress" href="#">WordPress</a></li>
</ul>
</li><!-- end ul li -->
	<li><a title="Blog" href="#">Blog</a>
<ul>
	<li><a title="Blog &gt; Themes" href="#">Themes</a></li>
	<li><a title="Blog &gt; Plugins" href="#">Plugins</a></li>
</ul>
</li><!-- end ul li -->
	<li><a title="Contact" href="#">Contact</a></li>
</ul>

To learn more about accessibility in a CSS menu, you should read my past tips regarding accessibility here.

This part of the menu should be clear. If not, you should consider learning the basics of HTML first, before you start on a CSS menu like this.

CSS for your menu

The style language CSS will add functionality to the menu and we will combine that later on with the bahavior file I mentioned earlier. I will start to give you the elements we need to style. If we forget one part of these, our menu might not have the functionality we require. More explanation follows below when we add the ‘core’ codes.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ul#nav {}    /* the structure of our head-menu */
li {} /* the structure of the first items */
ul#nav li a {} /* the links inside our first items */
ul#nav li a:hover {} /* the roll-over styles for the links in our first items */
ul#nav li ul {} /* first items > submenu structure */
ul li  {} /* the structure of our submenu items */
li > ul {} /* extra styles for Internet Explorer (behavior file) */
li:hover ul, li.over ul {} /* to make things work in Internet Explorer (call for the behavior file) */

Stripped Version

The codes that I will provide below are really necessary for the menu, it is the core of our menu. Delete any of these codes and your menu might not work. Here’s the demo; Stripped Version.

CSS

1
2
3
4
5
6
7
8
9

ul#nav {
list-style: none;
padding: 0;
margin: 0;
}

Everything clear here. List-style should be none if you would like to have no bullets or arrows in front of every item on the list. Padding and margin to zero: we can change that later and now we have full control of spacing.

CSS

1
2
3
4
5
6
7
8
9

li {
float: left;
position: relative;
width: 100px;
}

Next in line are the list items. Float all our items to the left, position set to relative to make sure the submenu is displayed relatively to the first items.

CSS

1
2
3
4
5

ul#nav li a {
display: block;
}

A user should be able to click on the whole menu item in order to get to the source. Therefore we need to transform the click-able area of the link the same width/height as the item itself. We do that with display:block;.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

li ul {
display: none;
position: absolute;
width:100px;
top: 0;
left: 0;
margin-left:-1px;
}

Display:none; for the submenu because the submenu shouldn’t display when we aren’t hovering the menu item. The submenu is positioned absolute, 0 pixels from the top, 0 pixels from the left and therefore he’s aligned just below our first-level menu.

CSS

1
2
3
4
5
6
7

li>ul {
top: auto;
left: auto;
}

To reset the top and left attributes used in the ul#nav li ul{} we use this set of codes. It’s Internet Explorer causing the problem here. In li ul we have set those attributes to zero, but Firefox and other modern browsers need auto to do the job.

CSS

1
2
3
4
5

li:hover ul, li.over ul {
display: block;
}

This is the part where the behavior file comes in. When we hover with our mouse over the first-level menu items, the display:block; makes sure the second-level menu pops up.

Next we will go through the behavior part.

Behavior file to add li:hover support

In the modern browsers, we simply add a :hover pseudo selector to a li element because that is supported. Unfortunately, we still have Internet Explorer 6 around and that’s a problem. IE6 doesn’t support :hover selectors on anything other then links. I have found a trick to add the extra functionality.

The work-around is a behavior file called “whatever:hover”. More information about the “whatever:hover” file can be found on the author’s website and you should have the actual file on your disk and in the same directory with your CSS file.

We can add this behavior file to our CSS with the following codes:

CSS

1

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

Current Item

Here is a little extra that might tweak up your CSS menu.

Sometimes it is a nice add-on to a CSS menu to change the style of one item a bit when you are on that source. For example, if you are on the Homepage, the Homepage menu item has a little difference in style and when we are on a Services page, it has a little difference in style. You get the point?

We do this by adding a new class to a menu item. When we want to style our Homepage item differently, here’s how we do that.

Change:

1

<li><a href="" title="Homepage">Homepage</a></li>

To:

1

<li class="current"><a href="" title="Homepage">Homepage</a></li>

With the CSS:

1

ul#nav li.current{  /* your styles */ }

Why don’t we just style the class .current?

Because the CSS specificity of the normal list item (ul#nav li ) rules over .current and your ‘current’ item will not change. ul#nav li.current on the other hand will work. CSS specificity is one of the most hard parts of CSS and you can read a detailed article regarding CSS specificity here.

Time to hop in

We have worked our way into a horizontal CSS menu that works in both Internet Explorer 6, Firefox and all other modern browsers. It’s time to let your fantasy go and create a beautiful drop-down CSS menu yourself!

Today any good website builder should allow you to create an amazing drop-down CSS menu, it’s jut a matter of understanding the tools you have to work with.

Download & Demo

Of course, I couldn’t resist and gave it a shot as well and put it in the download too. You should visit the demos and download the sources. Enjoy!

DEMO: Stripped Version
DEMO: My Version
DOWNLOAD: horizontal-css-menu.rar

Custom Greeting Cards Printing Online at PsPrint.com