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/

注释出位置属性将改变含li的宽度。