Drop Down Menu Tutorial, CSS + xHTML only, no JS

**Political Monst** · 09:41 PM

I've seen quite a few people asking about this and it really is easy. Basically you have your ul with li's within and then ul and li's within that:

HTML Code:

<ul id="menu">
<li>A lovely Tab
    <ul><li>sub tab #1</li>
    <li>sub tab #2</li>
    </ul>
</li>
<li>A lovely Tab#2
    <ul><li>sub tab #21</li>
    <li>sub tab #22</li>
    </ul>
</li>

OK, that's pretty simple. Now you need to hide the extra ul's, make the primary tabs form horizontally. So we add this to the css:

Code:

ul { /*this applies to all ul tags*/
margin: 0; padding: 0; /*stops them moving around too much*/}
ul#menu li { list-style: none; float: left; padding: 5px; }
ul#menu li ul { display: none; /*hides the submenu clever bit now:*/
position: absolute; top: auto; left: auto; /*makes it appear below the item*/ }

/*now we need to show it on hover*/
ul#menu li:hover ul { display: block; }

/*now we style the sub menus li's*/
ul#menu li ul li { display: block; float: none; /*makes them appear on top of each other*/ }

Want proof it works or an example, the exact code is on this page:
http://kerplunc.com/projects/_css/drop_down_menu.php
[WARNING: do not copy that page directly, it has no <body> or <head> or <html> set up properly, it is just for testing]

Enjoy...

EDIT: I've returned, willing to help some more, bumped the thread, more examples coming soon, possibly some css thrown in/whatever.

**seolman** · 05-31-2007, 11:32 PM

Hi Nick,

Out of curiosity I went to the page... no menu just some text.

**LadynRed** · 05-31-2007, 11:59 PM

What are you talking about ? If you pass your mouse over the text, you'll see his drop down.

**Political Monst** · 06-01-2007, 05:52 AM

Sorry, they are the menu, you have to hover over them, I didn't style them at all because people can do that themselves, maybe I should link them though?

**LadynRed** · 06-01-2007, 01:50 PM

This is good Nick, I'm gonna make it a stickie

**Political Monst** · 06-01-2007, 01:54 PM

Awesome, thanks ^^, should I post a message saying that I haven't styled the links?

**LadynRed** · 06-01-2007, 08:13 PM

I think you just did

**Political Monst** · 06-01-2007, 09:04 PM

guess so lol

, thanks for making it a sticky again

**Political Monst** · 06-03-2007, 08:20 AM

oops, broke the link, it's fixed now everyone ^^

**larryc** · 06-04-2007, 01:34 AM

Great menu layout! But, not in IE..

**Political Monst** · 06-04-2007, 02:43 AM

I'm on a mac so I can't test it, however, which version of IE is this? If 7 then I can make a workaround if 6 then probably not.

**URLhost arvo** · 06-10-2007, 12:18 AM

Short, sweet, and to the point. Nice little code snippet.

**URLhost arvo** · 06-30-2007, 01:43 PM

This does NOT work for Internet Explorer. Very disappointing. I will attempt to fix that...

**LadynRed** · 06-30-2007, 04:59 PM

No need.. IE 6 and older only supports the hover on the <a> tag. To solve that, you can use a behavior, called 'whatever hover". You can get the .htc file and the explanation here: http://www.xs4all.nl/~peterned/csshover.html

**King Justice** · 07-01-2007, 03:14 AM

Quote:

Originally Posted by LadynRed

No need.. IE 6 and older only supports the hover on the <a> tag. To solve that, you can use a behavior, called 'whatever hover". You can get the .htc file and the explanation here: http://www.xs4all.nl/~peterned/csshover.html

Damn IE!

!

**niceguy_81333** · 07-01-2007, 04:58 AM

not working on IE. only some text is displyed
rgds
bil

**bwuuci** · 07-05-2007, 09:48 PM

i just tried it on my webpage and Tested it without uploading it to a server and worked fine, still trying to figure out to align it to the Right and how to make it drop under and not to the Right of it.

**ForrestCroce** · 07-07-2007, 02:03 PM

Quote:

Originally Posted by LadynRed

No need.. IE 6 and older only supports the hover on the <a> tag.

Ahem. IE 666.

**Political Monst** · 07-07-2007, 02:38 PM