CSS下拉菜单格式问题答案

【问题标题】：CSS dropdown menu format issuesCSS下拉菜单格式问题
【发布时间】：2013-08-04 17:31:57
【问题描述】：

我需要有关 CSS 下拉菜单的帮助。 jsfiddle 链接如下。

有两件事我需要帮助。首先是如何将 5 个菜单项分布在整个页面上？我用 ul li { margin-right: XXX } 尝试了这个，但在 Item5 一直到页面右侧之前，它下降到下一行。有什么想法吗？

第二件事。我正在尝试更改文本的颜色（在 jsfiddle 中它是蓝色的），但是当我通过向文本添加类来更改文本颜色时，将文本更改为白色的悬停操作不起作用。如何更改文本颜色以确保悬停仍然有效？

谢谢！

【问题讨论】：

【解决方案1】：

请查看您的小提琴http://jsfiddle.net/G7Ghs/3/的更新
你有一些错别字（例如，缺少字母的过渡），我修正了它们。

字体颜色被浏览器设置为蓝色，因为“”被设置为超链接，所以你需要选择这个标签，例如与

ul li a{    color: orange; }
ul li a:hover{    color: yellow; }

我定义了一些演示颜色，按照你喜欢的方式改变它们。

要强制 5 列跨越一侧，请删除边距并设置例如

  ul li {
    margin: 0;
    width:19%;
  ... }

不知何故，20% 不起作用，第 5 列将中断到下一行，19% 就可以了。

希望它是您正在寻找的。p>

【讨论】：

感谢 dsuess 的回复。不幸的是：ul li a { color: orange } 不起作用。改变颜色不会改变任何东西，似乎有什么东西阻止它改变。至于宽度：19%，它向右不够远。那里有填充物防止它一直穿过吗？抱歉，我是 html 和 css 的新手。谢谢。
您的链接仍然显示为蓝色吗？我检查了最新的 chrome、firefox、ie10、opera 中的小提琴更新号 3（jsfiddle.net/G7Ghs/3），链接不是蓝色的。 Item1-5 是橙色，悬停时变成黄色，Item3A-D 是白色变成绿色。您使用什么浏览器和操作系统？
您已经定义了ul{ text-align: left; }。 "width: 19%" 的意思是，你的每一列都是页面宽度的 19%。如果 div 中的内容很短（如 item1 的五个字符），那么 rigth 就有很大的空间。当然，您可以将最后一项 (item5) 设置为“text-align: right”，就像在小提琴 #4 jsfiddle.net/G7Ghs/4 中一样，但这看起来很奇怪，因为 item4 和 item5 之间的空间很大。你可以“text-align:center”，但是不同长度的文本行也会看起来很奇怪。（删除 ul li ul 块中的“display: none;”行以启用子菜单的淡入/淡出）