Question

考虑以下嵌套列表：

<div >
<ul class="main">
<li><a href="#">Fist item</a><ul class="ab"><li>a1</li><li>a2</li><li>a3</li><li>a4</li></ul>
</li>
<li><a href="#">Second item</a><ul class="ab"><li>b1</li><li>b2</li><li>b3</li><li>b4</li></ul></li>
<li><a href="#">Third item</a><ul class="ab"><li>c1</li><li>c2</li><li>c3</li><li>c4</li></ul>
</li>
</ul>
</div>

我希望水平显示外层，内层显示在外层之下。为了这个目的，我在css风格中使用了外部和内部列表的相对和绝对位置：

#container {width:300px}
main {width:200px;position:relative;}
body > div > ul > li {display:block;float:left;padding:5px;}
body > div > ul > li > a:hover + .ab {display:block;}
.ab {display:none;clear:both;position:absolute;left:0px}

除非您将容器宽度调整为200px，否则它可以正常工作（因为您可以尝试JSfiddle）（我必须实现使用不同宽度的解决方案）。在这种情况下，内层容器与外层容器重叠。我想知道是否有可能强制内容器通过css显示在外容器之后或以另一种方式解决这个问题。

修改：我需要让我的问题更加清晰，因为到目前为止给出的答案显示了我already提出的相同提案。所以我在css样式中做了一点补充，声明了一个内部容器的框（这里是更新JSfiddle snippet）。关键问题是我的玩具示例在更复杂的网页中模拟左列。我事先并不知道这样一列的确切宽度（可能是150px，也许是200px或类似的东西），而且我不知道外部列表元素的标题长度。我需要一个解决方案，适用于外部容器可能具有的任何宽度。

这是我在默认情况下获得的屏幕截图：

这是我将外部容器缩小到200px（试试JSfiddle）：

而这正是我想要获得的：

我希望现在能清楚我的问题。

Answer 1

你需要将外层置于相对和内层的绝对位置，如下所示：

#container {width:300px}
.ab {
    display:none;
    clear:both;
    position:absolute;
    left:0px
}
body > div > ul > li {
    display:block;
    float:left;
    padding:5px;
    position:relative;
}
body > div > ul > li > a:hover + .ab {
    display:block;
    position:absolute; 
    left:0; /* So it aligns to the left edge of outer level */
    top:100%; /* So inner level isn't overlaping outer */
}
main {width:200px;position:relative;}

此处示例：https://jsfiddle.net/d9fsff69/2/

Answer 2

为确保灵活性，请确保宽度不固定。其余的是保证金问题。我为视觉辅助添加了一些背景色：

使用此CSS：

#container {
    width: 100%
}
main {
    width: 200px;
    position: relative;
}

body > div > ul > li {
    display: block;
    float: left;
    padding: 5px;
    background:#999;
}

body > div > ul > li > a:hover + .ab {
    display: block;
    background:#ddd;
    margin-top: 5px;
}

.ab {
    display: none;
    clear: both;
    position: absolute;
    left: 0px
}

以下是DEMO

Answer 3

我只想给你类似的例子：

＆＃13;

body {
  margin: 0px;
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}
ul {
  width: 100%;
  text-align: center;
  display: inline-block;
  margin: 0px;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  background: #000;
  color: #fff;
}
ul li {
  font: 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 20px 20px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  color: #71b51e;
  background: #161616;
}
ul li ul {
  padding: 0;
  position: absolute;
  left: 0;
  top: 57px;
  width: 140px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  background: #161616;
  display: block;
  color: #fff;
  text-align: left;
  padding: 5px 15px;
  height: 25px;
}
ul li ul li:hover {
  background: #111;
  color: #71b51e;
}
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

＆＃13;

<ul>
  <li>OPTION
    <ul>
      <li>SUB-1</li>
      <li>SUB-2</li>
      <li>SUB-3</li>
      <li>SUB-3</li>
    </ul>
  </li>
  <li>OPTION</li>
  <li>
    OPTION
    <ul>
      <li>SUB-1</li>
      <li>SUB-2</li>
      <li>SUB-3</li>
      <li>SUB-3</li>
    </ul>
  </li>
  <li>OPTION</li>
</ul>

＆＃13;

将html元素定位在嵌套列表中

3 个答案: