Question

我正在使用文章SuckerFish Dropdowns中的HTML / CSS菜单。我的特定菜单有灰色背景。我试图让菜单的背景具有固定的宽度。我尝试将宽度参数添加到CSS中的#navbar部分，但似乎没有做任何事情。如何获得这种固定宽度的行为？

HTML 的

<ul id="navbar">
    <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
    <li><a href="index.html">System Set-Up &amp; Status</a>
    </li>
    <li><a href="#">NMEA Output</a>
        <ul>
            <li><a href="ch1.html">Channel 1</a></li><li>
                <a href="ch2.html">Channel 2</a></li><li>
                <a href="ch3.html">Channel 3</a></li><li>
                <a href="ch4.html">Channel 4</a></li></ul>
    </li>
    <li><a href="#">UDP Output</a>
        <ul>
            <li><a href="udpch1.html">Channel 1</a></li><li>
                <a href="udpch2.html">Channel 2</a></li><li>
                <a href="udpch3.html">Channel 3</a></li><li>
                <a href="udpch4.html">Channel 4</a></li><li></li></ul>
        </li>
        <li><a href="baro.html">Baro / PoE</a>
        </li>
        <li><a href="advanced.html">Advanced</a>
        </li>
    <li><a href="mob.html">MOB</a>
    </li>
</ul>

CSS

#navbar {
    margin: 0;
    padding: 0;
    height: 1em; }
#navbar li {
    list-style: none;
    float: left; }
#navbar li a {
    display: block;
    padding: 3px 8px;
    background-color: #cccccc;
    color: #000000;
    text-decoration: none; }
#navbar li a:hover {
    background-color: #999999; }
#navbar li ul {
    display: none;
    width: 10em; /* Width to help Opera out */
    background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; }
#navbar li:hover li, #navbar li.hover li {
    float: none; }
#navbar li:hover li a, #navbar li.hover li a {
    background-color: #c0c0c0;
    border-bottom: 1px solid #fff;
    color: #000; }
#navbar li li a:hover {
    background-color: #999999; }

CSS snippet is here和HTML snippet is here

jsfiddle of question：

Answer 1

由于您正在浮动菜单列表项，因此您需要在无序列表中放置一个clearfix。然后你可以在ul上设置宽度和背景颜色。查看http://jsfiddle.net/qT7xs/。

Answer 2

#navbar采用适当的宽度，但没有background-color设置，因此默认情况下它是透明的。

从background-color移除#navbar li a，然后将其添加到#navbar。您还必须移除高度并清除浮子以使其正常工作：

#navbar {
    background-color: #cccccc;
    margin: 0;
    padding: 0;
    overflow: hidden;    /*clear floats */
}

工作示例：http://jsfiddle.net/UfuG2/

HTML / CSS下拉菜单，想让它的背景固定宽度

2 个答案: