Question

我一直在使用这个水平菜单现在我想对它进行一些更改

如果有子菜单，我想仅在悬停影响时突出显示父菜单。如果我应用背景颜色，它适用于目前所有的父菜单。
我对CSS＆amp;觉得这不是正确的做法。如果我没有申请正确的CSS，请纠正我的问题。

我尝试了不同的方法，但我无法做到正确。我在这个菜单上遇到的另一个问题是，当我将鼠标悬停在父菜单项上时，它略微移动了2px或3px（这只发生在谷歌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属性更合适。

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

1 个答案: