ドロップダウンナビゲーションの自動幅

Question

私は、CSSを使用したドロップダウンメニューを持っています。私はドロップダウンに自動幅を持たせたいが、それは親の幅を（期待通りに）とる。

自動的な幅にするにはどのような方法が最適ですか？ （すなわち、その親の幅を無視する）ことができる。

ここでは、それはCSSで不可能な場合は、JavaScript/jQueryのソリューションは十分であろうjsfiddle

nav{ background: #000 ; clear: both ; height: 40px ; padding: 0 10px ; } 
nav ul{ list-style: none ; } 
nav li{ float: left ; position: relative ; } 
nav a{ display: block ; float: left ; color: #fff ; text-decoration: none ; padding-right: 30px ; font-size: 120% ; line-height: 40px ; } 
nav div{ display: none ; position: absolute ; background: red ; left: 0 ; top: 40px ; } 
nav li:hover div{display: block ; } 

<nav> 
    <ul> 
     <li><a href="#">Home</a> 
      <div> 
       <p>example of width not working</p> 
      </div> 
     </li> 
     <li><a href="#">next</a> 
      <div>example</div> 
     </li>   
     <li><a href="#">again</a> 
      <div>example</div> 
     </li> 
    </ul> 
</nav>  

です。

Answer 1

white-space: nowrap;を次の行に移動しない要素で試してみてください。 すべての単語を同じ行に保存し、新しい行に分割しないで、自動的な幅を取得します。あなたのjsfiddleで

：またhttp://jsfiddle.net/8BV2N/4/

。 divの代わりにサブメニューに別のulを使用することをお勧めします。この方法で検索エンジンはあなたのウェブサイトの構造をよりよく理解することができます。