Question

我有两个嵌套列表：

<ul>
    <li>First item
        <ul>
            <li> <a href="#">some item</a> 
            </li>
            <li> <a href="#">some item</a> 
            </li>
            <li> <a href="#">some item</a> 
            </li>
        </ul>
    </li>
    <li>Second item
        <ul>
            <li> <a href="#">some item</a> 
            </li>
            <li> <a href="#">some item</a> 
            </li>
            <li> <a href="#">some item</a> 
            </li>
        </ul>
    </li>
</ul>

我希望我的第一个列表级别是水平对齐的，而第二个列表级别是垂直对齐的。

我试过了css：

ul > li {
   display: inline-block;
}

但它也适用于第二级（fiddle）。我该怎么办？

注意：我也注意到子弹消失......

Answer 1

试试这个：

  ul > li > ul >li {
    display:block;
}

Answer 2

hi Fractaliste尝试以下代码，如果您需要其他任何内容，请告诉我

<style type="text/css">
.navigation ul {
margin:0px;
padding:0px;
list-style: none;
}
.navigation li {
float: left;
height: 30px;
position: relative;
background-color: rgb(226, 226, 226);
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
}
.navigation li a {
text-decoration:none;
}
.navigation li a:hover {
text-decoration:underline;
}
.navigation li ul {
margin:0px;
padding:0px;
position: absolute;
left: -9999px;
height:30px;
}
.navigation li:hover ul
{
left: 0;
width:160px;
}
.navigation li:hover ul li
{
   background-color: rgb(226, 226, 226);
margin-bottom: 3px;
padding: 8px 10px 1px 10px;
}

</style>


<div class="navigation">
<ul>
<li><a href="index.html">menu1</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>

<li><a href="menu2.html">menu2</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>

<li><a href="menu3.html">menu3</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>

<li><a href="menu3.html">menu3</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>

<li><a href="menu4.html">menu4</a>

<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li></ul>

</div>

如何垂直对齐嵌套列表

2 个答案: