Question

当我将鼠标悬停在画廊上时，它会显示彼此相邻的子菜单列表，但我会将子1和2显示在彼此下方，以便显示下拉列表。我怎么能改进这个代码，并且是我不需要的任何鳕鱼。

这是图片：

enter image description here

HTML：

<div id="menu_wrapper">
<div id="menu">
    <ul>
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#" target="_parent">Gallery</a>
            <ul>
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#" target="_parent">Plants</a></li>
        <li><a href="#" target="_parent">News</a></li>
        <li><a href="#" class="last">Contact</a></li>
    </ul>     

    </div> <!-- end of menu -->
</div><!-- end of menu_wrapper -->

CSS

    /*
CSS
*/
#menu_wrapper {
    width: 100%;
    height: 80px;
    margin: 0 auto; 
    background: url(menu_bar.jpg) no-repeat center top;
}

#menu {
    width: 900px;
    height: 80px;
    margin: 0 auto;
    background: url(menu_bar.jpg) no-repeat center top; 
}

#menu ul {
    float: left;
    margin: 0px;
    padding: 30px 0 0 150px;
    list-style: none;
}

#menu ul li {
    padding: 0px;
    margin: 0px;
    display: inline;
}

#menu ul li a {
    position: relative;
    float: left;
    display: block;
    width: 115px;
    height: 30px;
    padding: 5px 0 0 0;
    margin-right: 10px;
    text-align: center;
    font-size: 16px;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-decoration: none;
    color: #eee901; 
    font-weight: bold;
    outline: none;
    background: url(menu_item.png) no-repeat;
}

#menu li a:hover, #menu li .current {
    color: #FFF;
}

#menu ul ul {
    display:none;
    position:absolute;
    text-align:left;
    float:left;
}
#nav ul ul li {
    display:block;
}

#menu ul li:hover ul {
    display:block;
}
#menu ul li:hover ul li{
    style:none;
}

Answer 1

你的CSS获得你正在寻找的行为几乎是正确的 - 似乎你已经为你的一个CSS选择器写了错误的id。

你在哪里：

#nav ul ul li {
    display:block;
}

你应该：

#menu ul ul li {
    display:block;
}

此样式会覆盖您在CSS中其他位置设置的display:inline，并导致子菜单项堆叠。这是一个JSFiddle来演示。希望这可以帮助！如果您有任何问题，请告诉我。

（关于代码改进......好吧，您似乎不需要在float:left元素上指定<ul>。虽然您需要并且不需要可能会有所不同，具体取决于您网站的更广泛背景。）

带有下拉菜单的CSS错误

1 个答案: