Question

我尝试了很多更改，但没有一个工作，我也在Stackoverflow中搜索，但我无法正常工作。

子菜单'ul'中的'li'仅在一个子项目中重叠，而不是显示4个子项目。

HTML：

<div id="menu">
            <div class="container">
                <div class="row">
                    <ul class="menu-list">
                        <li><a href="#">Menu Item 1</a></li>
                        <li><a href="#">Menu Item 2</a>
                            <ul class="menu-sub-list">
                                <li><a href="#">Sub-menu Item 1</a>
                                <li><a href="#">Sub-menu Item 2</a>
                                <li><a href="#">Sub-menu Item 3</a>
                                <li><a href="#">Sub-menu Item 4</a>
                            </ul>
                        </li>
                        <li><a href="#">Menu Item 3</a></li>
                        <li><a href="#">Menu Item 4</a></li>
                        <li><a href="#">Menu Item 5</a></li>
                    </ul>
                </div>
            </div>
        </div>

CSS：

#menu {
    margin: 3% 0;
    background-color: rgb(255,138,61);
    height: 70px;
}
#menu ul.menu-list {
    list-style: none;
    text-align: center;
    line-height: 70px;
    height: 70px;
    display:block;
    clear:both;
}
#menu ul.menu-list li {
    display: inline-block;
    padding: 0 20px;
    text-transform: uppercase;
    font-size: 1.05em;
    height: 70px;
    position:relative;
}
#menu ul.menu-list li:hover {
    background-color: rgb(255,102,0);
}
#menu a {
    color: #fff;
    text-decoration: none;
    display:block;
}
#menu ul.menu-list ul.menu-sub-list {
    display: none;
}
#menu ul.menu-list li:hover > ul {
    display: block;
}
#menu ul.menu-list > li > ul > li {
    overflow: hidden;
    display: block;
    width: 100%;
    padding: 10px;
    text-transform: uppercase;
    font-size: 1.05em;
    height: 70px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1;
    background: #f2f2f2;
    float: none;
}

Answer 1

这是因为每个子导航元素在您的代码中都有position: absolute;，使它们重叠。只有子菜单包装器需要position: absolute;

http://jsfiddle.net/8kzxyj3g/

#menu {
    margin: 3% 0;
    background-color: rgb(255,138,61);
    height: 70px;
}
#menu ul.menu-list {
    list-style: none;
    text-align: center;
    line-height: 70px;
    height: 70px;
    display:block;
    clear:both;

    top: 100%;
}
#menu ul.menu-list li {
    display: inline-block;
    padding: 0 20px;
    text-transform: uppercase;
    font-size: 1.05em;
    height: 70px;
    position:relative;
}
#menu ul.menu-list li:hover {
    background-color: rgb(255,102,0);
}
#menu a {
    color: #fff;
    text-decoration: none;
    display:block;
}
#menu ul.menu-list ul.menu-sub-list {
    display: none;
    position: absolute;
    top: 100%;

}
#menu ul.menu-list li:hover > ul {
    display: block;
}
#menu ul.menu-list > li > ul > li {
    overflow: hidden;
    display: block;
    width: 100%;
    padding: 10px;
    text-transform: uppercase;
    font-size: 1.05em;
    height: 70px;
    left: 0px;
    z-index: 1;
    background: #f2f2f2;
    float: none;
}

CSS Submenu Li的重叠

1 个答案: