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

Question

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

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

这是我要实现的目标:

(绿色列表是“How are you”的子菜单，有换行符，因为它受宽度限制。)

目前我拥有的是:

这是笔: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

对于 li li 使用此 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;

 }