CSS Tabs Menu with Dropdowns

Published by Dave | Filed under CSS Menus, CSS, Hints and Tips, Web Design

I’ve previously written a tutorial which demonstrated how to create accessible tab navigation menu’s. Within this tutorial, I’m going to explain how this menu can be expanded further to create dropdowns when the top level menu item is hovered over.

This article uses the Son of Suckerfish method for the dropdowns, as seen on HTML Dog
Source: Son of Suckerfish

If you haven’t yet seen the CSS tab menu tutorial then I’d suggest reading through that demo first as we’ll be using it as the basis for this menu.

CSS tabs menu tutorial

Once you’ve got the tabs menu, we’re going to have a look at creating this (Try hovering over the “About” or “Services” tabs):

• Home
• About
  • My Qualifications
  • My Personal Details
• Services
  • HTML
  • CSS
  • Accessibility
• Portfolio
• Contact
• Links

The HTML

The HTML is pretty straight forward and uses the same HTML as the previous example but now with sub-items added

<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a>
<ul>
<li><a href=”#”>My Qualifications</a></li>
<li><a href=”#”>My Personal Details</a></li>
</ul>
</li>
<li><a href=”#”><span>Services</span></a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Accessibility</a></li>
</ul>
</li>
<li><a href=”#”><span>Portfolio</span></a></li>
<li><a href=”#”><span>Contact</span></a></li>
<li><a href=”#”><span>Links</span></a></li>
</ul>


That should be pretty straight forward and without any CSS applied it should simply render an unordered list which won’t be pretty but will still be perfectly usable and accessible.

The CSS

Ok, lets start by making sure we have the same navigation as in the CSS tabs tutorial so that we have the menu tabs generating correctly

* {
padding: 0;
margin: 0;
}
body {
font-size: 73%;
font-family: verdana, arial, helvetica, sans-serif;
padding: 10px;
}
#navigation {
overflow: auto;
}
#navigation li {
float: left;
list-style: none;
background-color: #666; /* to cater for users without images */
}
#navigation a {
display: block;
background-image: url(css-tabs/tabright.gif);
background-position: top right;
background-repeat: no-repeat;
color: #FFF;
text-decoration: none;
font-weight: bold;*/
}
#navigation span {
display: block;
background-image: url(css-tabs/tableft.gif);
background-repeat: no-repeat;
padding: 5px 15px;
}
#navigation a:hover {
background-position: right -198px;
}
#navigation a:hover span {
background-position: 0 -198px;
}

If you view this then it may look a little odd as we need to style the submenu items to work with this menu but you should at least see the hover on the top menu items working.

First, we’ll completely hide the submenu by positioning it 999em off to the left of the screen using absolute positioning. We’ll also style the list a little itself by providing a width, fontsize and a margin so that it’s styled as we want when it becomes visible again.

#navigation li ul {
position: absolute;
width: 10em;
left: -999em;
margin-left: 2px;
font-size: 90%;
}

Next, we need a little bit of code to style the link correctly and give the submenu items a hover state.

#navigation li ul a, #navigation li ul a:link {
background-image: none;
padding: 5px;
width: 10em;
background-color: #666;
}
#navigation li ul a:hover {
background-color: #333;
}

Finally, we snap the submenu back into place by apply left: auto; to the menu once the parent is hovered over. This resets the submenu to it’s default positioning instead of the -999em we used previously.

#navigation li:hover ul, #navigation li.sfhover ul {
left: auto;
}

Making IE play nicely

You may have noticed in the previous CSS that I didn’t explain why we need the following style #navigation li.sfhover ul. Internet Explorer 6 and below, only support hover on anchors and as we’re going to be needing to hover on the li element this menu won’t currently work in IE6 without a little JavaScript so this CSS style is used to apply the JavaScript (in the next step) to IE6.

The JavaScript

Include the following snippet of JavaScript code within your page and the menu will now work identically in IE6. This should be linked to in an external .js file but will work just as well if applied in the script tags.

sfHover = function() {
var sfEls = document.getElementById("navigation").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Summary

That’s really all there is to it. To ensure that the site is accessible in IE6 then you should also ensure that the top level links can take the user to a subpage in the site as any users of IE6 or below that have JavaScript disabled will not be able to activate the submenu’s.

However, this is hopefully only a temporary solution as Internet Explorer 6 gradually gets phased out in favour of more standards compliant browsers.

While IE6 still has a large user-base though, then it’s recommended that you do still support this browser to ensure that all your visitors have an equal experience on the site.

As always, please feel free to leave any comments or questions about this tutorial, or feel free to suggest future demonstrations.