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

Question

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

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

这是我想要实现的目标：

（绿色列表是＆＃34的子菜单;你好吗＆＃34;。它有一个换行符，因为它受到宽度的限制。）

目前我所拥有的是：

这是笔：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是可能的。但是子列表的绝对定位会使它们脱离doc流程。结果，它们与它们下面的内容重叠。我也不能使用JS。

Answer 1

对于li li使用此css样式。

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

给一个好的再见，然后把它写成css 例如

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

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

 }

Answer 2

似乎不可能。

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

关于菜单，为了达到理想的效果，唯一的解决方案是在不同的列表中设置顶级菜单和子菜单。这样就无需绝对定位子菜单（二级列表）。