CODEWITHSUNDEEP
htmlcsssubmenu
Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

Issue - Hover of Submenu CSS

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..!!

Upvotes: 0

Views: 111

Answers (3)

vals
vals

Reputation: 64164

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

Upvotes: 1

Douglas Denhartog
Douglas Denhartog

Reputation: 2054

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.

Upvotes: 1

Shomz
Shomz

Reputation: 37701

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).

Upvotes: 1

Related Questions