Question

我所有的li元素都在另一个上面的同一个地方，甚至他们应该使用显示块。导航栏只显示常规菜单下的子菜单，但所有ul，li都在彼此之上。

<ul class="navbar">
    <li class="left"><a href="/scripts">Scripts</a>
        <ul>
                <li>
                 <a href="#">test1</a>
                </li>
                <li>
                 <a href="#">test2</a>
                </li> 
                <li>
                 <a href="#">test3dfgdsfgdfsg</a>
                </li> 
                <li>
                 <a href="#">test523542352543253q4teargt</a>
                </li> 
        </ul>       
    </li>

是的，我知道代码非常混乱

ul.navbar {
list-style: none;
bottom: -30px;
padding: 0;
}

ul.navbar li.right {
    float: right;
    line-height: 14px;
    display: block;
}

ul.navbar li.left {
    float: left;
    line-height: 14px;
    display: block;
}

ul.navbar li a {
    display: block;
    color: #FFF;
    font-size: 20px;
    line-height: 14px;
    text-decoration: none;
    background: #3366CC;
    margin: -30px 0 0 0;
    padding: 10px 25px;
}
ul.navbar li ul {
    list-style-type: none;
}

ul.navbar li a:hover {
    background: #4075DE 
}

ul.navbar li ul li a {
    display: none;
    color: #FFF;
    font-size: 20px;
    position: absolute;
    margin:0px;
}

ul.navbar li:hover ul a{
    display: block;
    margin-left:-40px;
}

Answer 1

删除位置：a {}上的绝对位置 http://jsfiddle.net/v1kq7dva/

ul.navbar {
list-style: none;
bottom: -30px;
padding: 0;
}

ul.navbar li.right {
    float: right;
    line-height: 14px;
    display: block;
}

ul.navbar li.left {
    float: left;
    line-height: 14px;
    display: block;
}

ul.navbar li a {
    display: block;
    color: #FFF;
    font-size: 20px;
    line-height: 14px;
    text-decoration: none;
    background: #3366CC;
    margin: -30px 0 0 0;
    padding: 10px 25px;
}
ul.navbar li ul {
    list-style-type: none;
}

ul.navbar li a:hover {
    background: #4075DE 
}

ul.navbar li ul li a {
    display: none;
    color: #FFF;
    font-size: 20px;
    position: absolute;
    margin:0px;
}

ul.navbar li:hover ul a{
    display: block;
    margin-left:-40px;
}

绝对位置将元素置于其容器中的0,0，所以如果你把它放在某个东西上然后不指定位置，那么一切都会在彼此之上。

css display：block不显示所有元素

1 个答案: