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

我已经使用这个水平菜单有一段时间了，现在我想对它做一些修改

如果父菜单有子菜单，我只想在“悬停影响”上高亮显示它。如果我应用背景色，它将应用于当前所有的父菜单

我不擅长CSS&觉得这不是正确的方法。如果我没有应用正确的css，请纠正我的css

示例链接位于

更新版本：

我尝试了不同的方法，但我没能做对。这个菜单的另一个问题是，当我将鼠标悬停在父菜单项上时，它会稍微向下移动2px或3px（这只发生在GoogleChrome中，但在IE9&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>

|
|
|
|

|
|
|
|
|


|
|

如果我正确理解了问题，则您只希望父菜单项在有子菜单的情况下具有悬停的背景色

我已经更新了你的密码

我将具有子菜单的li类设置为具有子菜单

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

我希望这有帮助。至于跨浏览器问题，如果元素处于不同的位置，我建议使用normalize.css之类的东西。“规格化”将使基础样式在浏览器中保持一致

---

编辑：只是想提供一个额外的注意事项：您的菜单间隔栏都具有相同的ID。ID属性对于页面上的每个元素都应该是唯一的。在这种情况下，使用class属性更合适。

@谢谢，说得好。我将用类替换此ID。你说得对。我将尝试修复css样式问题，我将看看normalize是否可以修复这些问题。我不确定我的CSS是否清晰，如果你有这样一个我可以实现的菜单片段，那就太好了。

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