Issue - Hover of Submenu CSS

Question

HTML

<div id='cssmenu'>
    <ul>
        <li class='active'>
            <a href="Index.aspx">HOME</a>
        </li>
        <li>
            <a href="AboutUs.aspx">ABOUT US</a>
        </li>
        <li class='has-sub '>
            <a href="Products.aspx">PRODUCTS</a>
            <ul>
                <li class='has-sub '>
                   <a href='#'>Product 1</a>
                   <ul>
                       <li><a href='#'>Sub Item</a></li>
                       <li><a href='#'>Sub Item</a></li>
                   </ul>
                </li>
                <li class='has-sub '>
                    <a href='#'>Product 2</a>
                    <ul>
                        <li><a href='#'>Sub Item</a></li>
                        <li><a href='#'>Sub Item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="Services.aspx">SERVICES</a>
        </li>
        <li>
            <a href="Enquiry.aspx">ENQUIRY</a>
        </li>
        <li>
            <a href="ContactUs.aspx">CONTACT US</a>
        </li>
    </ul>
</div>

Fiddle

As you can see the fiddle the submenu of the list item PRODUCT collapses in this.. i am working on this for more than an hour, can you help where i am doing mistake and need clear explanation too..!!

Answer 1

Yes, @vals and @shomz are half correct.

You do need to add height:100%; to #cssmenu ul ul

BUT, to fix the Product 1 and Product 2 sub menu overlapping, you need to change:

#cssmenu ul ul ul {
    top: 0;
    left: auto;
    right: -99.5%;
}

TO:

#cssmenu ul ul ul {
    top: 0;
    left: 100%;
}

And @shomz is right, there is a lot of unnecessary styling going on here.

For example, you define #cssmenu ul ul ul TWICE:

ONCE as:

#cssmenu ul ul ul {
    top: 0;
    left: auto;
    right: 100%;
}

and a second time as:

#cssmenu ul ul ul {
    border-top: 0 none;
}

You need to go back and combine instances of duplication like this because if you leave the first one that defines top and left, then in the one with border you add top:0; and left: 100%;, things will not work I describe.

Answer 2

The 100% height of #cssmenu ul li is causing it to overlap. It takes the height of the parent ul element, which is 0.

See here: http://jsfiddle.net/SQ5Cp/26/

This fixes the issue, but you should probably consider rewriting some parts of it in the future (like removing the absolute positioning of the child ul elements, etc).

Answer 3

Just a little behind Shomz answer ...

However, I would solve it this way (adding height 100% to ul of second level):

#cssmenu ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 100%;
    height: 100%;   /* added */
}

fiddle

Change also this for the submenu

#cssmenu ul ul ul {
    top: 0;
    left: 100%;
}

fiddle 2