1

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

为了让事情更清楚，这里是我正在做的事情：http: //jsfiddle.net/matias/n8gFT/

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

是否有可能做到这一点？

我想继续使用嵌套的 uls 和display: inline-blockfor items 而不是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>

示例 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 会被隐藏......等等......

4

4 回答 4

7

我们将从一点 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/ShaADm/28/

于 2013-07-07T17:27:17.417 回答
1

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

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

当然，它被推过的数量可以通过改变margin-left

于 2013-07-07T17:08:13.780 回答
1

我实现了我想要使用display: table-cellli 并减少 ul 的宽度。

看演示

于 2013-11-20T17:14:57.377 回答
-2

将一个类添加到子列表并设置它们的样式，如下所示：

.sub { position: absolute; margin-left: -27px; }
于 2013-07-07T17:24:05.823 回答