html - 带有下拉菜单的 CSS 错误

Question

当我将鼠标悬停在图库上时，它会显示彼此相邻的子菜单列表，但我希望子 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;
}

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

(关于代码改进......好吧，你似乎不需要在你的 float:left 元素上指定 <ul>。虽然你需要和不需要的东西可能会因更广泛的上下文而异您的网站。)