Question

我的子菜单隐藏在另一个div下面。我使用过z-index但它不起作用。以下是我的菜单代码。我也试图改变位置风格，但仍然没有结果。

菜单的HTML代码

<div id="menu" class="col-xs-10  col-sm-10 col-md-10">
    <ul>
        <li>Home</li>
        <li>Our Partnership</li>                    
        <li>About Us</li>
        <li class="hasSub">Our School
            <ul class="submenu">
                <div class="row">
                    <div class="col-xs-4 col-sm-4 col-md-4">
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4">
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4">
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                    </div>
                </div>
            </ul>
        </li>
        <li>Vision & Values</li>
        <li>News</li>
    </ul>
</div>

CSS代码

#menu{
    float: right;
    color: #2d385b;
    position: relative;
}
#menu ul {
    list-style: none;
}
#menu ul li {
    text-transform: uppercase;
    float: left;
    font-size: 15px;
    z-index: 5000;
}
#menu li ul{
    display: none;
    background:#ffffff;
    opacity: 0.9;
    position:absolute;
    min-width:450px;
    z-index:999999;
    right: 0px;
}
#menu li ul div {
    float:left;
    z-index:999999;
    border-right: #000 1px solid;
}
#menu li ul div li{
    width: 100%;
}
#menu li:hover ul{
    display: block;
}

Answer 1

我将您提供的代码放在jsFiddle中，菜单似乎工作正常。没有什么是隐藏的。 Your code in JSFIDDLE - CSS中可能还有其他内容导致隐藏元素。

If you see the problem in jsFiddle can you elaborate?

隐藏在其他div下的子菜单

1 个答案: