防止封裝塊格式UL彈出菜單項

Question

我正在研究一個菜單系統，該菜單系統在懸停在每個選項上時具有帶彈出式菜單的水平菜單欄。我希望看到的是，當您將鼠標懸停在菜單選項上時，沒有頂層子選項的包裝。如果我爲這個內容定義了一個靜態寬度，它就可以工作，沒有任何內容可以包裝，但是由於存在不必要的空白空間，這看起來設計的內容較少的菜單設計不佳。如果我添加一個空白區域nowrap，則內容不再包裝，但「內部容器」UL在內聯塊格式化時不會自動調整爲包含在其中的內容的正確大小（這是以下鏈接的迭代）。我想用一個nowrap解決方案，每個LI菜單的父UL的大小會自動調整大小，這樣我就不會執行超出空白大小的邊界。

的菜單如下：

 <div class="container"> 
     <ul id="nav"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="#s1">generic</a> 
       <span id="s1"></span> 
       <ul class="subs"> 
        <li><a href="generic.html">generic</a></li> 
        <li><a href="#">generic 1</a> 
         <ul> 
          <li><a href="generic.html">generic 1</a></li> 
          <li><a href="generic.html">generic 2</a></li> 
          <li><a href="generic.html">generic 3</a></li> 
          <li><a href="generic.html">generic 4</a></li> 
          <li><a href="generic.html">generic 5</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Week 2</a> 
         <ul> 
          <li><a href="w2d1.html">Day 1</a></li> 
          <li><a href="w2d2.html">Day 2</a></li> 
          <li><a href="w2d3.html">Day 3</a></li> 
          <li><a href="w2d4.html">Day 4</a></li> 
          <li><a href="w2d5.html">Day 5</a></li> 
         </ul>       
        </li> 
        <li><a href="w3.html">Week 3</a></li> 
        <li><a href="w4.html">Week 4</a></li> 
        <li><a href="continualedu.html">Continual Education</a></li> 
       </ul> 
      </li> 
      <li><a href="#s2">generic</a> 
       <span id="s2"></span> 
       <ul class="subs"> 
        <li><a href="#">generic</a> 
         <ul> 
          <li><a href="generic.html">generic</a></li> 
          <li><a href="generic.html">generic</a></li> 
          <li><a href="generic.html">generic</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Tech</a> 
         <ul> 
          <li><a href="generic">generic</a></li> 
          <li><a href="generic">generic</a></li> 
          <li><a href="generic">generic</a></li> 
          <li><a href="generic">generic</a></li> 
          <li><a href="generic">generic</a></li> 
          <li><a href="generic">generic</a></li> 
         </ul> 
        </li> 
        <li><a href="generic">generic</a> 
        </li> 
        <li><a href="genericl">generic</a> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#s3">generic</a> 
       <span id="s3"></span> 
       <ul class="subs"> 
        <li><a href="tier1.html">generic</a></li> 
        <li><a href="tier2.html">generic</a></li> 
        <li><a href="tier3.html">generic</a></li> 
        <li><a href="prement.html">generic</a></li> 
        <li><a href="rcc.html">generic</a></li> 
       </ul> 
      </li> 
      <li><a href="#">generic</a> 
       <span id="s4"></span> 
       <ul class="subs"> 
        <li><a href="#">generic</a> 
         <ul> 
          <li><a href="generic">generic</a></li> 
          <li><a href="generic">generic</a></li> 
          <li><a href="generic">generic</a></li> 
         </ul> 
        </li> 
        <li><a href="generic.html">generic</a></li> 
        <li><a href="generic.html">generic</a></li> 
       </ul> 
      </li> 
      <li><a href="#">generic</a></li> 
      <li><a href="#">generic/generic/generic</a></li> 
      <li><a href="#">generic</a> 
       <span id="s5"></span> 
       <ul class="subs"> 
        <li><a href="generic.html">generic</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

我連接通過JSFidle整個項目，因爲它只是太多把這裏和那裏的鏈接的內容。在JSFiddle的正在運行的版本中記下，當您將鼠標懸停在菜單上時，大多數子菜單中的黑色邊框（這是框，最終版本中它只是一個基本的陰影）小於內容 - 此是我想要解決的。

JSFiddle Project

如果你能幫助我不勝感激！

在這裏沒有找到與我的場景相匹配的答案，但試圖考慮類似問題的答案 - 無濟於事。

Answer 1

在您的#nav ul.subs> li類中，您正在相對設置側填充％。

將其更改爲絕對值px解決了問題 - 保存到您的小提琴中。