基于 CSS 的水平菜单样式不起作用

Question

我已经使用这个水平菜单有一段时间了现在我想对它做更多的改变

1. 如果父菜单有子菜单，我只想在悬停影响时突出显示父菜单。如果我应用背景颜色，它适用于目前的所有父菜单。
2. 我不擅长 CSS，觉得这不是正确的做法。如果我没有应用正确的 css，请纠正我的 css。

jsfiddle 的示例链接

更新版本：http://jsfiddle.net/sKDns/

我尝试了不同的方法，但我无法做到正确。这个菜单的另一个问题是，当我将鼠标悬停在父菜单项上时，它会稍微向下移动 2px 或 3px（这仅在 Google Chrome 中发生，但在 IE 9 和 FF 中同样有效）。

我会很感激这方面的帮助

<div id="nav-wrapper">
    <ul class="dropdown dropdown-linear" id="nav">
        <li class="active"><span class="dir"><a href="#">HOME</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">ABOUT US</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">ISSUE</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">CATEGORIES</a></span><span id="menus-spacer">|</span>
            <ul>
                <li><a href="#">Politics</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Feature</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Economy</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Feature</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Business</a><span id="menus-spacer">|</span></li>
            </ul>
        </li>   
        <li><span class="dir"><a href="#">ARCHIVE</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">NEWS</a></span><span id="menus-spacer">|</span></li>
    </ul>
</div>

Answer 1

如果我正确理解了这个问题，您只希望父菜单项在悬停时具有背景颜色（如果它有子菜单）。

我已经更新了你的jsfiddle。

我将带有子菜单的li的类设置为has-submenu。

<li class="has-submenu"><span class="dir"><a href="#">CATEGORIES</a></span><span id="menus-spacer">|</span>

然后我将 CSS 规则更新为仅适用于该类：

ul.dropdown li.has-submenu:hover > *.dir
{
      background-color:#f1f1f1;
}

我希望这会有所帮助。至于元素位于不同位置的跨浏览器问题，我建议使用 normalize.css 之类的东西。 Normalize 将使基本样式在不同浏览器中保持一致。

编辑：只是想提供一个附加说明：您的菜单间隔跨度都具有相同的 ID。页面上每个元素的 ID 属性应该是唯一的。在这种情况下，使用 class 属性会更合适。