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><a href="index.html">ONE</a></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.