您能否看一下this demo并让我知道如何解决内部<ul>的左缩进并摆脱子红色背景之前掉落的灰色区域?

<ul class="sidebar-navigation">
    <li>List 1
        <ul class="sidebar-inner-list">
            <li> <a href="#">Link</a></li>
            <li> <a href="#">Link</a> </li>
        </ul>
    </li>
    <li>List 2
        <ul class="sidebar-inner-list">
            <li> <a href="#">Link 2</a></li>
            <li> <a href="#">Link 2</a></li>
            <li> <a href="#">Link 2</a></li>
        </ul>
    </li>
</ul>

body{color:#fff;}
ul{list-style-type:none;}
li{background-color:#2d2d2d;}
li:hover{ background-color:#ccc;}
.sidebar-inner-list>li{ background-color:red; margin-left:-40px;}

最佳答案

http://jsfiddle.net/sQWE6/4/

ul { padding:0 }


只需从列表中删除自动填充。我想这里的真正问题是,为什么不只使用<div>?它们没有自动填充,并且您似乎不需要实际的列表(list-style-type:无)。

关于css - 嵌套的内部<ul>列表样式存在问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23100823/

10-12 12:25
查看更多