Question

我有一个带子菜单的菜单。我使用嵌套的uls来实现这个目标。现在我面临这种情况：我希望所有项目和子项目在各自的级别水平显示。问题是，当父列表有子列表时，它的宽度会增加，所以同一级别的下一个项目会向右移动。

为了让事情更加明确，这是我正在采取的措施：http://jsfiddle.net/matias/n8gFT/

如您所见，我希望将项目B和C放置在绿色虚线空格所在的位置。

是否可以这样做？

我想继续使用嵌套的uls和display: inline-block代替float: left

示例HTML ：

<ul>
    <li>ITEM A
        <ul>
            <li>sub item A1</li>
            <li>sub item A2</li>
        </ul>
    </li>
    <li>ITEM B</li>
    <li>ITEM C</li>
</ul>

SAMPLE CSS ：

ul{border: 1px solid red; padding: 10px;}
li{display: inline-block; border: 1px solid blue; margin: 5px; padding: 10px; vertical-align: top;}
span{border: 1px dashed lime; margin: 0 10px; padding: 5px;}

编辑1 ：我忘了告诉你：A，B和C有孩子。如果我点击B，它的子项会被显示，A和C被隐藏......等等......

Answer 1

我们将从一点CSS

开始

#menu > li.sub ul {
list-style: none;
position: absolute;
top: -1000em;
left: 0px;
}


#menu li.sub ul li a {
display: inline;
}

#menu > li.sub:hover ul {
top: 3em;
}

#menu{
text-align:left;
}

li{
display:inline-block;
}

完成一些HTML

<ul id="menu" >

<li class="sub"> ITEM A
<ul>
<li>sub A1</li>
<li>sub A2</li>
</ul>
</li>
<li class="sub">ITEM B
 <ul>
<li>sub B1</li>
<li>sub B2</li>
</ul>
</li>
<li class="sub">ITEM C
     <ul>
<li>sub C1</li>
<li>sub C2</li>
</ul>
</li>

</ul>

和JSFIDDLE http://jsfiddle.net/ShADm/28/

Answer 2

我使用display: table-cell来实现我的目标，并减少了ul的宽度。

请参阅demo

Answer 3

您可以设置正在推送of margin-left: -20px;的列表，这是一个工作小提琴

http://jsfiddle.net/n8gFT/1/

当然，可以通过更改margin-left

来修改推送量

Answer 4

将一个类添加到子列表中并按如下方式设置它们的样式：

.sub { position: absolute; margin-left: -27px; }

使列表项彼此相邻

4 个答案: