CSS忽略一个子元素的宽度

Question

我有一个HTML菜单，它包含列表项和子菜单：

* {
  margin: 0;
  padding: 0;
}
#navi {
  width: 500px;
  height: 50px;
  margin: 0 auto;
  position: relative;
  background-color: lightcoral;
}
#navi > ul {
  right: 0;
  list-style: none;
  position: absolute;
}
#navi > ul li {
  text-align: right;
  margin-left: 10px;
  margin-right: 10px;
  white-space: nowrap;
  background-color: lightblue;
}
#navi > ul li,
#navi > ul li * {
  height: 50px;
  line-height: 50px;
  vertical-align: top;
  display: inline-block;
}
#navi > ul li ul {
  display: block;
  white-space: nowrap;

<div id="navi">
  <ul>
    <li>
      <a>top level a</a>
      <ul>
        <li>
          <li>
            <a>a sub level a</a>
          </li>
          <li>
            <a>a sub level b</a>
          </li>
      </ul>
      </li>
      <li>
        <a>top level b</a>
        <ul>
          <li>
            <a>b sub level a</a>
          </li>
        </ul>
      </li>
  </ul>
</div>

我希望子菜单在顶级菜单下方是水平的。子菜单应显示在悬停状态，并与父列表项元素一起定位。

所有隐藏和显示内容都已完成，我的菜单除了一个问题外都能正常工作。

我希望子菜单（ul）不影响父元素的宽度，以便顶部菜单项彼此相邻，子菜单会在下面展开。

我需要告诉li元素将其宽度基于第一个子元素（a）并忽略子元素ul元素的宽度。

此外，我不想使用JavaScript或类似的，一个简单的CSS解决方案将是华丽的！

我怎样才能做到这一点？

Answer 1

定位子菜单绝对可以满足您的需求。

演示：http://jsfiddle.net/v3xLkvke/1/

注释掉position属性会改变包含li的宽度。