CSS

Question

是否可以在不使用绝对定位或 JS 的情况下创建水平样式的菜单（如下图所示）？

正在尝试创建菜单。它使用标准的无序列表来显示。

这是我想要实现的目标：

(绿色列表是[=44=的子菜单]，因为受宽度限制所以有换行符。)

目前我拥有的是：

这是笔：http://codepen.io/olegovk/pen/NNREMY

代码：

HTML

<nav>
  <ul>
    <li><a href="#">Hello</a></li>
    <li><a href="#">How are you</a>
      <ul>
        <li><a href="#">Allright!</a></li>
        <li><a href="#">And you?</a></li>
        <li><a href="#">Fine</a></li>
        <li><a href="#">La-la-la</a></li>
        <li><a href="#">Bla-bla-bla</a></li>
        <li><a href="#">Cheerio!</a></li>
      </ul>
    </li>
    <li><a href="#">Good bye</a></li>
  </ul>
</nav>
<div class="clear"></div>
<p>Some paragraph to make sure it's below the menu.</p>

CSS

.clear {
  clear: both;
}
p {
  background-color: lightgrey;
}
li {
  float: left;
  list-style: none;
  display: list-item;
  margin: 0 0.5em;
}
li li {
  margin: 0 1em;
}
li li a {
  color: green;
}
nav ul ul{
  max-width: 300px;
}

我知道绝对定位子列表或 JS 是可能的。但是子列表的绝对定位会使它们脱离文档流。因此，它们与下方的内容重叠。我也不能使用JS。

Answer 1

丽丽使用这种 css 风格。

li li {
margin: 0 1em;
position:relative;
left:-110px;
}

给good bye li一个id然后写css 例如

   <li><a href="#" id='someId'>Good bye</a></li>

li #someId{
  position:relative;
  left:-150px;

 }

Answer 2

看来不可能。

这是另一个类似的问题：Position: absolute and parent height?

关于菜单，要达到预期的效果，唯一的解决办法是将顶级菜单和子菜单放在不同的列表中。这样就不需要绝对定位子菜单（二级列表）了。

CSS - 不使用绝对定位和 JS 的水平样式列表

CSS - Horizontally style list without using absolute positioning and JS

menu

list

submenu