Fiddle

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

正如你所看到的那样，小册子PRODUCT的子菜单在这里折叠了......我正在研究这个超过一个小时，你能帮助我在哪里做错了，也需要明确的解释.. !!

Answer 1

#cssmenu ul li的100％高度导致它重叠。它取父级ul元素的高度，即0。

见这里：http://jsfiddle.net/SQ5Cp/26/

这解决了这个问题，但你应该考虑将来重写它的某些部分（比如去除子ul元素的绝对位置等）。

Answer 2

仅仅落后于Shomz的答案......

但是，我会这样解决（将高度100％添加到第二级的ul）：

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

fiddle

也为子菜单更改

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

fiddle 2

Answer 3

是的，@vals和@shomz是正确的一半。

您需要将height:100%;添加到#cssmenu ul ul

但是，要修复产品1和产品2子菜单重叠，您需要更改：

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

TO：

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

@shomz是对的，这里有很多不必要的造型。

例如，您定义#cssmenu ul ul ul TWICE：

ONCE as：

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

第二次：

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

你需要返回并组合这样的重复实例，因为如果你离开第一个定义top和left的实例，那么在border的那个你添加{{ 1}}和top:0;，我描述的东西不起作用。

问题 - 子菜单CSS的悬停

Fiddle

3 个答案: