OK. Here's the deal. A list is normally one item below the previous, right, and that's what you want. Then you need to place the sub-menu at a distance from the first list so they don't overlap. I took the code from the example, not your page, to see how it was supposed to work. I change a couple of things.
Here is the original style in the example:
Code:
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 10em;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
#content {
clear: left;
}
</style>
And here is what I changed it to:
Code:
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items Removed the float so it will work as a normal list*/
position: relative;
width: 10em;
}
li ul { /* second-level lists Changed top to zero and left to 75 px so the submenu is placed correctly*/
display: none;
position: absolute;
top: 0;
left: 75px;
}
li>ul { top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
}
#content {
clear: left;
}
</style>
So... take my version, and change the left possition to suit your menu. Hope it helps 
Originally Posted by reptilianfeline
Bookmarks