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

http://jsfiddle.net/zcfqu/

在这段代码中玩了一段时间，感到有些困惑。

我如何：


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


的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>

最佳答案

去除所有浮子和位置：绝对

Check this demo

我刚刚删除了所有floats（这引起li的有趣跳跃，但实际上并不需要）和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（滚动到页面的底部）

关于css - 如何在CSS中自定义下拉菜单？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18557654/