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

Question

http://jsfiddle.net/zcfqu/

研究这段代码有一段时间了，有点困惑。

我如何:

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

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

移除所有 float 和position:absolute

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 (滚动到页面的最底部)