下拉菜单的 CSS 错误

Question

当我将鼠标悬停在画廊上时，它会显示彼此相邻的子菜单列表，但我希望 sub 1 和 2 显示在彼此下方，因此它是一个下拉菜单。我该如何改进这段代码，还有我不需要的代码。

图片如下：

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 来演示。希望这可以帮助！如果您有任何问题，请告诉我。

（关于代码改进...好吧，您似乎不需要在 <ul> 元素上指定 float:left。尽管您需要和不需要的内容可能会因更广泛的上下文而异您的网站。）