ul.nav ul.sub li {
clear: left; /* must clear any immediately preceding LI.has-sub */
}
ul.nav ul.sub li.has-sub {
float: left; _display: inline;
_clear: none; /* (5) don't clear any immediately preceding LI.has-sub in IE6 since clearing is not necessary anyway in this browser,
* and doing so on an LI.has-sub causes breakage when there are at least two consecutive submenu items both with subsubmenus;
* however, we keep the clear on other LIs to work around another bug in which, whenever the first item of a submenu is an
* li.has-sub with clear:none and the second item is a normal LI, a one-item-high vertical gap appears before normal LI
* unless it has clear:left */
margin-top: -10000px; /* (1) set offscreen distance */
height: 25px; /* height of child A... */
height: 10025px; /* (3) ...which IE6 expands by 10000 to enclose its child A */
}

/*HEIGHT*/
.nav {
height:1.563em;/*you could remove this and clear the float differently, but to me this makes the most sense*/
}
.nav a {
padding:.2em 0;/*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
}
.nav a.main {
height:1.563em;/*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
line-height:1.563em;/*not really necessary, but in this specific case it vertically centers the main link text*/
overflow:hidden;/*making it more bulletproof*/
padding:0;/*remove the padding that was applied above*/
}
.nav ul {
padding-top:1.563em;/*persistent background trick*/
margin-top:-1.563em;/*persistent background trick*/
}
.nav ul ul {
position:relative;/*so that it can be moved top/left*/
top:-1.563em;/*this is the sole reason why the main links must have a fixed height*/
}

/*WIDTH (!IMPORTANT)*/
/*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/
/*set the link width here*/
.nav .link,
.nav a {
width:9em;/*same as width*/
}
.nav ul li {
/*force ie8 to float-drop*/
max-width:9em;/*same as width*/
}
/*set the sublink left shift width here (same as width)*/
.nav ul ul {
/*move the sublinks to the side, so they dont overlap*/
left:9em;/*same as width*/
}
.nav li.reversed ul {/*reverse the direction of sublinks for the last dropdown*/
left:auto;
right:9em;/*same as width*/
}
/*add the negative value of "width - 1px" here (because css can't do math)*/
/*or (width - 0.063em) where 0.063em is 1px on 16px base size*/
.nav a {
/*makes the links very thin, so that the sublinks can hide inside the main link*/
margin-right:-8.937em;/*make this width - 1px*//*or width - 0.063em*/
}

/*Dropper Dropdown*/
/*supports up to 4 sub-levels in IE5-7, more can be added*/
/*modern browsers already support any amount of sublevels*/
/*made by Timo Huovinen*/

How it works:

Same as the simplified dropdown but i have nested the dropdowns, now any link hovered withing the dropdown expands, causing a float drop for every level

Info:

This dropdown was created because of my hate of javascript based dropdowns.
This dropdown serves to proove that it is indeed possible to create a true css only dropdown.
It took about a month to make the dropdown (from idea to reality), and a week to simplify it with the help of Paul and another week to make it multilevel.
And another several months to reach it's current state.
It was also featured as a quiz on Paul's CSS quizzes on Sitepoint (my forum's alias is YuriKolovsky).

Terms of use:

The software referenced within this license is distributed free of charge and free from any warranty. It may be used freely for any purpose whatsoever. The author created and released this work because he is genuinely a Nice Person!

The author sincerely hopes that end users enjoy and appreciate the hard work that went into creating it, and would appreciate being referenced in future modifications of the code since it was based on the author’s original concept and work.

Users are nonetheless encouraged to provide reciprocity whenever possible as it provides positive reinforcement and encouragement to the author. Furthermore, the minimum reciprocation I ask is to leave a ‘thank you’ comment in the area below:

I really like your more "easily customizable" version, it's much more neatly organized.

I have two questions about it, however -- and I apologize in advance if the questions are elementary in nature.

First, I would like the "Main" link at the top to be a certain color in the hover state (say blue, for instance), and for it to stay that color when I scroll down through the submenu's (which should stay a different color from the "Main" link at the top). I should add that I'd like the Main link to have a clear background when it's not being used. I was able to acheive this in Anton's version, but I'm having trouble duplicating this effect in yours. Do you have any advice on how to make this possible?

Also, the second question may be a bit more obvious to some -- but I'd like to know how to make the #navigation div flush with the top of the screen, without any space in between.

Hope this isn't too many questions. Thanks again for all your wonderful help.

if you want the navigation to stick to the top, then you need to remove the margins and paddings from the css body element

i suggest using a css reset [google it] or just this css* {margin:0; padding:0;}

i also found a different version of anton p's version, that i will post shortly, where he claims the bug is not present, the fixed version is a direct simplification of my version, while the broken version is a version of another persons version of my version. hope that makes it clearer :P