1

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

  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>
4

1 回答 1

2

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

我已经更新了你的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 之类的东西。规范化将使基本样式在浏览器中相同。

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

于 2013-05-19T13:05:56.280 回答