Pure CSS menu - submenu covering up other choices - html

Question

I have a pure CSS menu (no javascript desired for this), with the HTML:
<ul id="nav">
<li>
<div>First Menu
</div>
<ul>
<li>First Option</li>
<li>Second Option</li>
<li id="subnav">Sub Menu —>>
<ul>
<li>First Sub Option</li>
<li>Second Sub Option</li>
<li>Third Sub Option</li>
<li>Fourth Sub Option</li>
</ul>
</li>
<li>Third Option
</li>
<li id="subnav">Second Sub Menu —>>
<ul>
<li>Second Sub Menu, First Sub Option</li>
<li>Second Sub Menu, Second Sub Option</li>
</ul>
<li>Fourth Option</li>
</li>
</ul>
</li>
<li>
<div>Second Menu
</div>
<ul>
<li>Next First Option</li>
<li>Next Second Option</li>
</ul>
</li>
</ul>
And the CSS:
#nav, #nav a {
text-decoration: none;
text-transform: uppercase;
color: #000;
padding: 0px 1px 0px 1px;
margin: 0px;
border: black thin solid;
text-decoration: none;
font-weight: bold;
font-style: italic;
font-size: 115%;
list-style-type: none;
font-family: sans-serif;
margin-left: none;
background-color: #EFAA0D;
z-index:100;
}
#nav>li {
float: left;
}
#nav li ul {
list-style-type: none;
display: none;
width:20em;
position: absolute;
left: 4px;
font-weight: normal;
}
#nav li>ul {
top: auto;
left: auto;
}
#nav li:hover>ul {
display: block;
}
#nav li a:hover {
background-color: #fdca2e;
}
#nav li a:link, #nav li a:visited {
padding: 0em .25em 0em 0.25em;
border: black thin solid;
text-decoration: none;
display: block;
left:2px;
}
#nav li>a {
font-weight: normal;
}
#subnav li a:link, #subnav li a:visited {
color: #EFAA0D;
padding: 0em .25em 0em 0.25em;
border: green thin solid;
display: block;
left:2px;
background-color: black;
}
#subnav li a:hover {
background-color: #555;
position: relative;
left: 1px;
}
Please see the fiddle: http://jsfiddle.net/sablefoste/wRK9v/7/
My concern is viewing the "Third Option" and beyond. When trying to access these options, it is covered by the sub-menu of the "Second Option". The only way to access is to skate the mouse over the padding.
Is there a way to fix this?

Answer 1

You have left the default padding for unordered list elements, which is what is indenting your menu. Padding is considered part of the element regarding the :hover state. You first want to zero out the padding for your UL elements, then add a margin [-left] of the amount you wish for it to indent. In this case, you would add (or I should say, merge):
#nav li ul {
padding: 0;
margin-left: 40px;
}
Demo: http://jsfiddle.net/wRK9v/8/

Answer 2

You have not overridden the default padding on the ULs, so in your Fiddle you can see how the menu is moved over to the left, but when you mouseover the area "outside" of the UL you are still technically moused over the third UL and it will not disappear.
If you override the default padding that space on the left will go away, but now all of your UL elements will be lined up and you still won't be able to view the rest of the menu.
#nav li > ul {
top: auto;
left: auto;
padding-left: 0;
}
If you then set the left positioning, you will be able to display the sub menus with as much or as little spacing as you want. You can apply this to all of the menus:
#nav li > ul {
top: auto;
left: 100px;
padding-left: 0;
}
Or specifically add it to the 3rd level menu:
#nav li #subnav > ul {
padding-left: 0px;
left: 150px;
}
Here's the Fiddle

Answer 3

I tend to want to solve everything in code, but a quick change is to increase the left-hand margin:
#nav li ul li ul
{
margin-left: 17.5em;
margin-top: -1.5em;
}
I'd assume you actually want the submenu to be just on the right of the second menu, right? I'd rework your indents to use hard pixels instead of ems. You are already specifying your width as 20em, so you can work with that and have your submenus show up to the right of the main menu.
The fiddle: http://jsfiddle.net/wRK9v/12/