Question

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

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

此处位于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/

也;对于子菜单而不是div，使用另一个ul被认为是最佳做法。通过这种方式，搜索引擎可以更好地了解您网站的结构。

下拉导航自动宽度

1 个答案: