HTML/CSS下拉菜单，要使其成为'；将背景设置为固定宽度

我正在使用文章中的HTML/CSS菜单。我的菜单背景是灰色的。我试图让菜单的背景有一个固定的宽度。我尝试在CSS中的#navbar部分添加一个width参数，但似乎没有任何效果。如何获得此固定宽度行为

HTML

和

---

：

由于您正在浮动菜单列表项，因此需要对无序列表进行清除。然后您可以在ul上设置宽度和背景色。查看。

导航栏的宽度适当，但没有设置背景色，因此默认情况下是透明的

从

#navbar li a

中删除

背景色

，并将其添加到

#navbar

中。您还必须移除高度并清除浮动，以使其正常工作：

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

---

工作示例：

不要链接到代码，确保它在您的问题中。

#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; }

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