CSS 下拉菜单

Question

我正在学习设计下拉菜单的样式并有几个问题。

您可以在此处看到下拉菜单： http://jsfiddle.net/tomperkins/3M7Cb/

我的问题是：

1. 如何获得向下箭头 出现在每个父项上（当我 尝试更换背景 属性）。

2. 怎样才能得到整个孩子 可点击的区域，而不是 只是文本本身？

一如既往，非常感谢所有帮助。

提前致谢，

汤姆·帕金斯

Answer 1

对于向下箭头，我倾向于使用文本对象而不是图像：

ul li.top:after {
content: "▼";
}

为了使整个 li 可点击：

ul li a {
    display: block;
    /* other stuff */
}

这两个建议的 JS Fiddle 演示。

---

编辑调整向下箭头的悬停样式：

ul li.top:after {
    color: #000;
    content: "▼";
    float: right;
}

ul:hover li.top:after {
    color: #ccc;
}

JS Fiddle demo

Answer 2

问题2>您的 标记需要呈现为占据下拉项区域的块。由于您使用专门的工具来构建这些菜单，我猜测有一个配置设置（或类似的）可以让您进行设置。