Question

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

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 bar缩小。

Answer 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; }

Answer 2

更改

ul.jsddm li {
    float: left;

到

ul.jsddm > li {
   float: left;

将float语句限制为第一级菜单项。

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

Answer 3

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

ul.jsddm > li {
    float: left;
}

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

http://jsfiddle.net/Gcbrp/

导航栏下拉框格式化问题css

3 个答案: