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的寬度。