Question

暂时玩这段代码并且有点困惑。

我如何：

更改每个子菜单的颜色？
使子菜单与主按钮的宽度相同吗？

HTML

<ul id="menu">
    <li><a href="#">This is the button</a>

        <ul class="submenu">
            <li><a href="#">Button one</a>
            </li>
            <li><a href="#">Button two</a>
            </li>
            <li><a href="#">Button three</a>
            </li>
        </ul>
    </li>
</ul>

Answer 1

更改每个子菜单的颜色

ul.submenu a:hover {
   background-color: red !important;
}

这在悬停时会发生变化。如果您希望它始终使用相同的颜色，请删除:hover

使子菜单与主按钮的宽度相同

ul.submenu, ul.submenu>li {
   width: 100%;
}

这样您就不需要应用固定的width。浏览器将使用父母改编width来计算它。

<强> Demo

Answer 2

这是解决问题的正确方法

DEMO http://jsfiddle.net/kevinPHPkevin/zcfqu/37/

// be more specific when targeting
ul#menu  ul.submenu li a:hover {
   background-color: green;
}
// set width to match button size
ul.submenu, ul.submenu>li {
   width: 100%;
}
 // assign classes for different coloured buttons. You could do this with css3 and `nth child` but it would limit your browser support considerably.
ul#menu .submenu li.btn1 a {
    background: red;
}
ul#menu .submenu li.btn2 a {
    background: yellow;
}
ul#menu .submenu li.btn3 a {
    background: blue;
}

Answer 3

删除所有浮动和位置：绝对

Check this demo

我刚删除了所有floats（这导致了有趣的跳跃而且真的不需要）和position:absolute（这导致菜单向侧面移动）

另外，我没有阅读你所有的CSS来查找哪个background属性覆盖了哪个属性，但我只删除了所有属性并在底部添加了新属性。

#menu > li { background-color: red; }
#menu > li:hover { background-color: green; }

.submenu li { background-color: blue; }
.submenu li:hover { background-color: yellow; }

编辑1

使用CSS缩短并减少CSS大小并使其更具可读性是一个好主意。此外，删除所有不正确的CSS，您也可以将border-radius: 2px 2px 2px 2px写为border-radius: 2px（并保存12个字节:O）

编辑2

<强> CSS shorthands - MDN

<强> font shorthand - W3C

background shorthand - W3C （滚动到页面底部）

Answer 4

看看这个，我改变了背景，“悬停”和宽度。它是正确的？ Fiddle

ul#menu, ul#menu ul.sub-menu and ul#menu, ul.submenu --> width: 200px;

ul#menu li a for the background

Answer 5

您可以尝试使用以下css，而不更改html元素。我已经为您的参考添加了一些评论。在css上只做了3次更改。

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    font-family: Helvetica;
    background-color: #57AD68;
    color: #FFFFFF;
    border-radius: 3px 3px 3px 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    height: 40px;
    line-height: 39px;
    padding: 0 20px;
    position: relative;
    text-align: center;
    vertical-align: bottom;
    border-radius: 3px 3px 3px 3px;
    border-style: none none solid;
    border-width: 0 0 1px;
    cursor: pointer;
    display: inline-block;
    float: center;
    list-style-type: none;
    text-decoration: none;
}

ul#menu, ul.submenu{
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    width: 134px; /*Adjust the sub menu width*/
}
ul#menu li{
    float: left;
}
/* hide the submenu */
li ul.submenu {
    display: none;
}

/* Main Button */
ul#menu li a{
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 0 20px;
    background: ; /*Remove the color here to avoid overlapped*/
    float:right;
    border-radius: 2px 2px 2px 2px;
    font-family: Helvetica;

}

ul.submenu a:hover {

        background: red;

}

/* show the submenu */
ul#menu li:hover ul.submenu{
    display: block;
    position: absolute;
    float:right;
    background-color:green; /*Adjust the color of sub menu.*/
}

ul#menu li:hover li,  ul#menu li:hover a {
    float: none;
    background: ;
}
ul#menu li:hover li a:hover {
    opacity:0.9;

}

Answer 6

我将每个li设置为150px宽度。这解决了这个问题。 http://jsfiddle.net/andaywells/zcfqu/34/

ul#menu ul.submenu li {width: 150px;}

如何在CSS中自定义下拉菜单？

6 个答案:

更改每个子菜单的颜色

使子菜单与主按钮的宽度相同

删除所有浮动和位置：绝对