悬停的 CSS 菜单问题答案

【问题标题】：CSS menu issue with hover悬停的 CSS 菜单问题
【发布时间】：2012-01-11 16:51:54
【问题描述】：

在我的 css 菜单上 My site 无论我对代码进行了多少调整，我似乎都无法让菜单在所有级别上都匹配。我是一个 CSS 新手，所以我可能会遗漏一些东西，但是当你将鼠标悬停并按下鼠标时，会有三种不同的尺寸，我希望它们都是统一的。我在 chrome 和 firebug 中查看过它，但找不到要扩展的父菜单以匹配悬停。

任何建议将不胜感激！！提前谢谢你:)

【问题讨论】：

标签： html css menu hover

【解决方案1】：

你的代码完全搞砸了。对于初学者，不要在子菜单中设置宽度。而是设置整个 UL.submenu 的宽度，并在里面显示：block，这样它们就会填满整个宽度

【讨论】：

我同意@dbugger - 相当混乱，为您提供答案需要相当长的时间......我将从清理所有内容开始：1 / 将每个属性放在它自己的行上，所以你保持一个概述，2/确保你从不在悬停时更改边距或填充，只需设置 bgcolor + text-decoration - 没有别的，3/ 始终将边距/填充放在 a 上，从不在 li - 这应该让你朝着正确的方向前进......
是的，我得到了一个模板，虽然它通过将我指向正确的方向帮助了很多，但一些 CSS 只是邪恶的。
抱歉，太乱了。从子菜单中删除所有样式并重新开始。从长远来看会更好。
不要用“悬停”设置任何东西的“宽度”，这是你应该始终遵循的规则。

【解决方案2】：

在你的 CSS 中改变它：

#menu2 li li a, #menu2 li li a:link, #menu2 li li a:visited {
    color: #FFFFFF;
    float: none;
    margin: 0;
    padding: 0 0 0 15px;
    width: 160px; //this is the change (width decreased)
}

希望这会有所帮助。

【讨论】：

【解决方案3】：

实现hover menu using CSS 并不难。它适用于所有现代浏览器，但不适用于 IE6，因为它不支持 :hover on li 标签。

【讨论】：