Shaun Mccran

My digital playground

08
J
A
N
2010

Creating a CSS only cross browser drop down menu

I'll say this up front, I'm not a CSS guru. I like CSS, but it can be incredibly frustrating. One of the clients I am currently producing work for requires a high level of Accessibility. High enough that we need to avoid using JavaScript unless any script has a "Non" JavaScript equivalent.

The site navigation is through a top level horizontal menu, but what if we also want a drop down menu? Can we do it in CSS only, and it still be Firefox, Internet Explorer 6,7 and 8 compatible?

Yes, we can, but it's a lot of code, and it's not pretty. The basic concept behind most CSS menus is to use a list, and transform each list item to suit your styling. So we will create a div, with a class of menu. Then create a list inside it.

view plain print about
1<div class="menu">
2        <ul>
3        <li><a href="">Top menu option
4        <!--[if IE 7]><!--></a><!--<![endif]-->
5        <!--[if lte IE 6]><table><tr><td><![endif]-->
6    
7        <ul>
8            <li><a href="">Link 1</a></li>
9            <li><a href="">Link 2</a></li>
10            <li><a href="">Link 3</a></li>
11            <li><a href="">Link 4</a></li>
12            <li><a href="">Link 5</a></li>
13            <li><a href="">Link 6</a></li>
14        </ul>
15
16            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
17        </li>
18        
19        </ul>
20    
21    </div>

Notice that there are some specific if statements relating to different versions of Internet Explorer. these basically make the functionality the same for each version, they are compensating for the differences in code handling between IE versions.

Next create a set of CSS styles to alter the appearance of the list. I am not going to go into the CSS line by line, as it is commented, but I'll explain the methodology behind it.

The top level menu item is always displayed, but the list is hidden using "visibility:hidden". When the user mouse's over the menu div the CSS applies a:hover ul{visibility:visible;. This makes the list visible.

view plain print about
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
3.menu {width:149px; height:32px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;}
4
5/* hack to correct IE5.5 faulty box model */
6* html .menu {width:149px; w\idth:149px;}
7
8/* remove all the bullets, borders and padding from the default list styling */
9.menu ul {padding:0;margin:0;list-style-type:none;}
10.menu ul ul {width:149px;}
11
12/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
13.menu li {float:left;width:149px;position:relative;}
14
15/* style the links for the top level */
16.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#c0c0c0; padding-left:10px; line-height:29px; font-weight:bold;}
17
18/* a hack so that IE5.5 faulty box model is corrected */
19* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}
20
21/* style the second level background */
22.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#c0c0cc url(arrow.gif) no-repeat 130px center;}
23
24/* style the second level hover */
25.menu ul ul a.drop:hover{background:#c0c0cc url(arrow.gif) no-repeat 130px center;}
26.menu ul ul :hover >
a.drop {background:#c0c0cc url(arrow.gif) no-repeat 130px center;}
27
28/* hide the sub levels and give them a positon absolute so that they take up no room */
29.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}
30
31/* another hack for IE5.5 */
32* html .menu ul ul {top:30px;t\op:31px;}
33
34/* style the table so that it takes no part in the layout - required for IE to work */
35.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
36
37/* style the second level links */
38.menu ul ul a, .menu ul ul a:visited {background: ghostwhite; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
39
40/* yet another hack for IE5.5 */
41* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
42
43/* style the top level hover */
44.menu a:hover, .menu ul ul a:hover{color:#000; background:#c0c0cc;}
45.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#c0c0cc;}
46
47/* make the second level visible when hover on first level list OR link */
48.menu ul li:hover ul,
49.menu ul a:hover ul{visibility:visible;}

There are also a lot of other browser specific hacks present, as the aim was to get the menu working in every Internet Explorer version, and be Accessible.

There is a demo of this here: CSS menu demo

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Julian Halliwell's Gravatar Hi Shaun

We started off using Javascript for these kind menus and then moved on to CSS-only. But while they may be cross-browser and accessible, I'm not sure they're really worth the trouble. I think many people find them difficult to use: they often disappear if your mouse movements aren't sufficiently precise, or they block the screen when you accidentally mouse over them.

Single level lists are probably ok, but in these days of broadband and faster page loading, multi-level "flyout" menus are less useful as shortcuts and more of an annoyance I'd say.

Cheers
Julian.
# Posted By Julian Halliwell | 12/01/10 14:06
Shaun McCran's Gravatar Yes, you are right, they can be quite tricky to navigate around, especially if the mouse over events are based on active elements in the menu.
Unfortunately in this case I had to use a CSS only version, as the client simply would not sign off anything that depended JavaScript. It makes for a lengthy CSS file, but ensures cross browser functionality.
# Posted By Shaun McCran | 15/01/10 10:06
# Posted By Kabi Kumar | 14/06/15 21:42
teachers day 2015's Gravatar Happy Teachers Day Poems Short Long Speech Essay
Hindi English Wishes SMS <a href="http://www.iteachersdayspeech.com/2015/08/27/happy... day Wishes</a> Quotes Greetings Marathi Tamil Images
Wallpapers Pictures Status DP Funny Jokes Trolls.
# Posted By teachers day 2015 | 27/08/15 07:49
songs download's Gravatar It is appropriate time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I desire to suggest you few interesting things or tips. Maybe you can write next articles referring to this topic. I desire to read more things about it.
# Posted By songs download | 30/08/15 20:11
new year eve's Gravatar Happy New Year SMS Wishes Messages Quotes Shayari Hindi English Short Status HD Wallpapers <a href="http://www.newyearsstatus.com/messages-happy-new-y... New Year Wishes</a>
<a href="http://www.xmerrychristmas.com/2015/12/05/free-chr... Screensavers</a> Profile Pictures DP Pics Images Photos for HNY Eve 31st Dec 2016
# Posted By new year eve | 14/12/15 12:52
Back to top