0

我正在制作一个导航栏，但似乎无法弄清楚为什么我的下拉菜单选项并排堆叠，而不是一个在另一个之上。我搜索并尝试了几乎所有内容。有什么建议么？

http://jsfiddle.net/isherwood/rUsNr/

HTML 标记：

<ul class="jsddm">
    <li><a href="home">Home</a>
    <li><a href="#">OS</a>
        <ul>
            <li><a href="#">Android</a></li>
            <li><a href="#">iOS</a></li>
        </ul>
    </li>
    <li><a href="#">Category</a>
        <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>
        </ul>
    </li>
    <li><a href="#">Rating</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </li>
    <li><a href="login">Login</a></li>
    <li><a href="register">Register</a></li>
</ul>

css

ul.jsddm
{
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 1.5em;

}

ul.jsddm a
    {
    color: #FFF;
    background-color: #333;
    border: 1px solid #444;
    display: block;
    text-decoration: none;
    text-align: center;
    width: auto;
}

ul.jsddm a:hover
{
    color: #000;
    background-color: #FFF;
}

ul.jsddm li
{
    position: relative;
    float: left;
    list-style: none;
    width: 16%;
}

ul.jsddm ul
{
    position: absolute;
    width: 150px;
    top: 25px;
    padding: 0;
    visibility: hidden;
}

我想在代码的 ul.jsddm li 部分中将宽度保持在 16%（这是 bav 栏缩小以适应较小的屏幕。

4

3 回答 3

1

我相信你的问题是由于以下CSS：

ul.jsddm li
{
    position: relative;
    float: left;
    list-style: none;
    width: 16%;
}

这些规则将适用于所有<li>……甚至是嵌套的。

试着把它变成：

ul.jsddm > li
{
    position: relative;
    float: left;
    list-style: none;
    width: 16%;
}

然后你可能想为你的嵌套添加一些东西<li>

ul.jsddm li ul li { list-style:none; }
于 2013-04-03T01:44:00.680 回答
0

改变

ul.jsddm li {
    float: left;

到

ul.jsddm > li {
   float: left;

将您的浮动语句限制为第一级菜单项。

http://jsfiddle.net/isherwood/rUsNr/6

于 2013-04-03T01:39:58.953 回答
0

为了保持 16% 的宽度ul.jsddm li，你需要做 isherwood 所说的加上：

ul.jsddm > li {
    float: left;
}

ul.jsddm li {
    position: relative;
    list-style: none;
    width: 16%;  
}

http://jsfiddle.net/Gcbrp/

于 2013-04-03T01:44:15.397 回答