Dropdown navigation automatic width

Question

У меня есть выпадающее меню, использующее только CSS. Я хочу, чтобы у drop down была автоматическая ширина, но она принимает ширину его родителя (как и ожидалось).

Каков наилучший способ получить автоматическую ширину? (т. е. игнорировать ширину его родителей), не определяя ширину набора.

Здесь на 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>  

Если это не представляется возможным с помощью CSS, решение Javascript/Jquery будет достаточно.

Answer 1

Попробуйте использовать white-space: nowrap; на элементе, который не должен идти на следующую строку. Он будет хранить все слова в одной строке и не врываться в новую строку, чтобы она автоматически менялась.

В вашем jsfiddle: http://jsfiddle.net/8BV2N/4/

Также; считается лучшей практикой использовать другую ul для вашего подменю вместо div. таким образом поисковые системы могут лучше понять структуру вашего сайта.