Jquery 下拉导航自动宽度

我有一个只使用CSS的下拉菜单。我希望下拉列表具有自动宽度，但它采用其父级的宽度（如预期的那样）

使其具有自动宽度的最佳方法是什么？（即忽略其父宽度）而不定义设置的宽度

在这里

宽度不工作的示例



例子


例子

---

如果CSS无法实现，Javascript/Jquery解决方案就足够了

尝试使用

空白：nowrap。
它将使所有单词保持在同一行上，而不会打断成新行，因此它将自动调整宽度

在您的JSFIDLE中：

还有,；使用另一个ul作为子菜单而不是div被认为是最佳做法。这样搜索引擎可以更好地理解您网站的结构。
谢谢，div的原因是下拉列表包含多个dl，仍然最好使用ul>li>dl？我根本不会使用
dl
，我会使用
ul>li>ul>li
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>