html - 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的宽度。