CSS Tabs Menu with Dropdowns

October 18th, 2007 · 9:52 am @ Dave Woods  -  49 Comments

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):

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.


Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • DZone
  • Reddit
  • StumbleUpon
  • Twitter

49 Comments → “CSS Tabs Menu with Dropdowns”


  1. Emeka

    2 years ago

    If by this I start off writing popup menus, I would eternal.


  2. Alex Billerey

    2 years ago

    Dave

    Came across your site via a Google CSS alert – love your site. Very nice piece of work.

    Alex


  3. Dave

    2 years ago

    Thanks Alex :)


  4. Buck

    2 years ago

    This is awesome! Thanks for the help. I have one question though. How would I implement an “on” image? like if I wanted the active tab to be another color? so everything would have 3 states, on, off, and hover.

    -Buck


  5. Dave

    2 years ago

    Quite easily. You’d need to apply an ID or class to the active item and then add another image to the two existing one’s and then simply adjust the background position for even further for the active tab.

    Hope that makes sense?


  6. Buck

    2 years ago

    Yeah man, that worked, I just threw a class on the that is active. Thanks for the help! now to just fix my differences between ie and firfox (it’s not your tabs, its the rest of my page)…

    keep up the good work.


  7. Gary Still

    1 year ago

    Good example. But I am unable inseart the java script in web page. where do i put this


  8. 50+ Nice Clean CSS Tab-Based Navigation Scripts

    1 year ago

    [...] [demo] [...]


  9. Ali Hodgson

    1 year ago

    Good tute but your example doesn’t seem to display the dropdowns in IE6!


  10. Dave

    1 year ago

    It works fine in IE6… (and even IE5.5)

    Do you have JavaScript disabled in IE6 as that’s the only thing that might be preventing it from working for you.


  11. Matthew Stroh

    1 year ago

    Dave, this is super great! The only thing that I’d like to see is for the tab you’re mousing over to stay light while you’re hovering over its children. Any way of getting that to stay active without nesting our anchor tags (like I’ve seen in other tutes like this).

    Thanks!


  12. CSS Tabs - The Ultimate Tab Menus « Lorelle on WordPress

    1 year ago

    [...] Dave Woods – CSS Tabs Menu with Dropdowns [...]


  13. 20 More CSS based Navigation Menus For Your Projects | Social CMS Buzz

    1 year ago

    [...] CSS Tabs Menu with Dropdowns [...]


  14. Joe

    1 year ago

    In IE7, the dropdowns stay active even after the mouse leaves the child element. Any ideas on fixing it?


  15. CSS ที่ใช้ทำNavigation Menus สำหรับแต่งเว็บไซต์ « Triple-S

    1 year ago

    [...] CSS ที่ใช้ทำNavigation Menus สำหรับแต่งเว็บไซต์ ในการทำเว็บไซต์หรือบล๊อค จำเป็นจะต้องมีแถบเมนู ที่จะลิงค์ไปยังที่ต่างๆ ถ้าหากว่าเมนูเหล่านั้นมีลักษณะที่สวยงามก็จะทำให้บล๊อคของเราดูเป็นมืออาชีพและน่าเชื่อถือมากขึ้น ลองมาดู 20 CSS ที่ใช้ทำเมนูกันครับ 1.CSS Tabs Menu with Dropdowns [...]


  16. Ellora

    1 year ago

    Hi

    Can provide the images used in this demo.
    2nd thing is the javascript. Can u plz publish the javascript needed to navigate from one tab to another.

    thanking u

    Ellora


  17. handoyo

    1 year ago

    Thanks for the tutor..Can you give an example of vertical tab menu?Thanks..


  18. bijusubhash.com » Blog Archive » CSS Tab-Based Navigation Scripts

    1 year ago

    [...] Demo ] CSS Tab Menu Javascript Menu GraphicsBookmar & ShareClose Bookmark and Share This Page Save [...]


  19. manoj d

    1 year ago

    how can i implement this script for multileval sub menu

    Thanks


  20. Gurdeep

    1 year ago

    Sir can u please help me out in javascript. can u suggest anything book or site because i want to master in javascript


  21. Dave

    1 year ago

    Sitepoint do an excellent book on JavaScript

    http://www.sitepoint.com/books/javascript1/

    There are others but if you want to understand the basics right through to some complex JavaScript then it’s a fantastic starting point.

    Hope that helps?


  22. 30 Excellent CSS Based Navigation and Buttons Tutorial | instantShift

    1 year ago

    [...] Tutorial Link: Click Here [...]


  23. Jayman Pandya

    11 months ago

    Hi,

    Thank you for the awesome tutorial but i have a problem in the sub-menu items that the tab-images that are used in the background are repeated in the submenu instead of the color codes that i have given for the sub-menu items

    This is the problem only in IE6 – the bugger….. Also it refuses to work in Opera……

    You guidance on the same will be heartily appreciated.

    Thank You very much

    Regards

    Jayman


  24. 100+ Massive CSS Toolbox | tripwire magazine

    10 months ago

    [...] CSS Tabs Menu with Dropdowns [...]


  25. idragon

    10 months ago

    hey nice tutorial by the way i got the navigation menu that’s till the html i am new to this so can anyone tell me where should i put the css code


  26. psk

    9 months ago

    New to HTML and CSS, so would like to thank you for your help on this. Was racking my head for so long, and i felt like a bit of a dumb ass sometimes…more of that to come in the future i bet…, cheers chief!


  27. Leandra

    9 months ago

    Dave,
    great tutorial.

    Can you please provide the gif images?
    :)


  28. Nice Clean CSS Tab-Based Navigation Scripts « Online Free Applications Software Tips Tools Wallpapers

    9 months ago

    [...] [demo] [...]


  29. 50+ Nice Clean CSS Tab-Based Navigation Scripts | w3capps.info

    9 months ago

    [...] [demo] [...]


  30. 50+ Nice Clean CSS Tab-Based Navigation Scripts « Scripts Web

    8 months ago

    [...] [demo] [...]


  31. дeткa

    8 months ago

    Очуметь просто! Почти все, блин, об этом знают, кроме меня :)


  32. 56 CSS Tabs & Navigation Menu Scripts and Examples | TECHFLAPS

    7 months ago

    [...] 51. CSS Tabs Menu with Dropdowns [...]


  33. TutsKing

    7 months ago

    This amazing tutorial has been added to the high quality list of tuts at tutsking.com


  34. sujith

    5 months ago

    how to increase the size of the top tab…..to extend upto full width……..please reply me as soon as possible


  35. Free Resources to Help You Become a CSS Expert Designer, | guidesigner.net

    5 months ago

    [...] CSS Tabs Menu with Dropdowns – A tutorial for creating a tabbed dropdown menu with CSS. [...]


  36. 250+ Resources to Help You Become a CSS Expert | X Design Blog

    5 months ago

    [...] CSS Tabs Menu with Dropdowns – A tutorial for creating a tabbed dropdown menu with CSS. [...]


  37. 250+ Resources to Help You Become a CSS Expert | huibit05.com

    5 months ago

    [...] CSS Tabs Menu with Dropdowns – A tutorial for creating a tabbed dropdown menu with CSS. [...]


  38. 20+ Sumber yang akan membuat anda menjadi CSS Master « Webdesigner Resource

    5 months ago

    [...] CSS Tabs Menu with Dropdowns – A tutorial for creating a tabbed dropdown menu with CSS. [...]


  39. Steve

    4 months ago

    Hello Dave! Excellent Tutorial! But there is one thing I unable to apply: Right-Aligment! How align the tabs to the right of the screen/div/container what ever… Im able to do this with the subtabs but not with the main ones…

    Help me please!

    Thank you!


  40. 50+ Nice Clean CSS Tab-Based Navigation Scripts | 9Tricks.Com - Tips - Tricks - Tutorials

    4 months ago

    [...] [demo] [...]


  41. Jason Wood

    3 months ago

    Hi Dave,
    Love your site!
    One question, could this be easily adapted to have different coloured tabs? i.e 1st tab blue with blue coloured dropdown, 2nd tab red with red dropdown etc..

    I tried to achieve this with another CSS dropdown menu but could not succeed.

    Thanks!


  42. Dave

    3 months ago

    Hi Jason,

    Yes you’d simply create the images in the colour that you want and then change the CSS of the dropdown to whatever you required :)


  43. Become a CSS Expert, 250+ Resources | Amazing and Inspiring Design

    3 months ago

    [...] CSS Tabs Menu with Dropdowns – A tutorial for creating a tabbed dropdown menu with CSS. [...]


  44. Jennifer

    2 months ago

    Thanks so much for this tutorial. Been wanting to do this for a long time.

    Seemed to be working great for me until I put a slideshow underneath it. The page links that fall below the slideshow box underneath the nav area disappear.

    I tried to get the slideshow to go to the back and the nav area to come to the front, but it doesn’t work.

    Any suggestions?

    thanks-
    Jennifer


  45. Jennifer

    2 months ago

    I should’ve said I tried to use the z-command to force it to the front, but no go. Maybe because I can’t use ‘absolute’ positioning?

    Thanks – I’m desperate.


  46. Dave

    2 months ago

    Hi Jennifer, I’ll need to see an example, would you be able to zip the complete site up or put it online somewhere for me to take a look please?


  47. Jennifer

    2 months ago

    Hi Dave-

    Sure, I can do that. I’ve uploaded a test to here:
    http://familyphotoevent.com/test

    All of the content is not there yet – I am trying to get the structure set first.

    And now for some reason I can’t get the links to work right either. I’m not typing it in twice, but for some reason, the address is in there twice on some of the links. Only a few of them are active Gallery I, About, and Contact.

    But you can see what is happening on the home page with the drop down menu going behind the content.

    Many thanks for the help!


  48. 50 den fazla css tab menü | FaydalıWeb | Internetin Faydalı Yüzü

    2 months ago

    [...] [demo] [...]


  49. Dave

    2 months ago

    Hi Jennifer, the problem is most likely being caused with all those div’s and using absolute position on everything. You’d be much better using float’s and margin/padding to position things than rely on absolute positioning for everything which is causing this problem and will most likely cause you problems in the future.


Leave a Reply

Categories

Latest Articles

Welcome

Hi, I'm Dave Woods and am a freelance web designer based in the UK and work for a variety of small and large businesses throughout the world.

I specialise in HTML and CSS using web standards to provide usable, accessible and search engine friendly websites that are designed and delivered to the highest standard.

Latest Comments

Popular Posts