Got lost in CSS dropdown menu - css

Question

i was able to make the dropdown menu already but when i tried to view it on other pc the secondlevel ul was misplaced and not below on it's li. So i tried to recode but i got lost. Please help.
Here is my html markup:
<div id="main-nav" class="menufont">
<ul id="nav">
<li>ONE</li>
<li class="sec">TWO
<ul id="twosecond" class="leveltwo">
<li>TWO A</li>
<li>TWO B</li>
</ul>
</li>
<li class="sec1">THREE
<ul id="threesecond" class="leveltwo">
<li>THREE A</li>
<li>THREE B</li>
<li>THREE C</li>
<li>THREE D</li>
</ul>
</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
</div>
And here is my messed up css:
ul.leveltwo {
background: #c7000d;
border: 1px solid black;
padding: 7px;
font: 16px Helvetica, Arial;
}
ul.leveltwo li {
color: #fff;
}
#twosecond li, #threesecond li {
font: 16px Arial;
display:block;
padding: 3px;
border-bottom: 1px dashed #fff;
}
#twosecond, #threesecond {
display: none;
position: absolute;
}
#nav li.sec:hover ul, #nav li.sec1:hover ul {
display: block;
}
The ul with class .leveltwo shows when i hover on it's main li but the ul of "TWO" is not aligned with it. Thanks alot in advance.

Answer 1

Just add display:none to your .leveltwo class and take out the #twosecond #threesecond tags. The `position:absolute is making the sub menus look like they're showing up under THREE.
Example: http://jsfiddle.net/r4gAQ/3/
Though I will say, I'd look into a jQuery solution, maybe a premade one like MLDDM. They have nice solutions that allow for vertical and horizontal menus. Also, hovering using pure CSS breaks in IE6... not that anyone should use that anymore.

Answer 2

Rechecked my post. This might be the CSS that would help you out. Try it out!
#nav li{
width:200px;
position:relative;
border: 1px solid black;
}
#nav li ul.leveltwo li{
border:none;
}
#nav li ul{
background: #c7000d;
border: 1px solid black;
padding: 7px;
font: 16px Helvetica, Arial;
color:white;
position:absolute;
left:200px;
top:0;
display:none;
}
#nav .sec:hover ul, #nav .sec1:hover ul{
display:block;
}