0

我有一个导航菜单。但是菜单很疯狂。

子菜单类（如果悬停第一个菜单，这是下拉菜单）。“firstmenu”是网站的主要区域，因此是列表的第一级。

问题：子菜单获取 Firstmenus 值。甚至是里面的小箭头background: url(images/nav-arrow.png) no-repeat center bottom;——但是为什么？！

我们已经对此进行了研究，拆分了代码，删除了typo3，所有的JavaScript，最后得到了这个css代码：

#firstmenu {
 list-style: none; 
 margin: 0;
 padding: 0;
}

#firstmenu .firstLevel {
 float: left;
}

#firstmenu .firstLevel a { 
 display: block;
 font-size: 1.166em;
 font-weight: 600;
 line-height: normal;
 color: #333;
 padding: 41px 20px 26px;
 margin-bottom: 4px;
}

#firstmenu .firstLevel .current a,
#firstmenu .firstLevel a:hover,
#firstmenu .firstLevel a.selected {
 color: #fff;
 background: url(images/nav-arrow.png) no-repeat center bottom;
}

#firstmenu .firstLevel a:hover,
#firstmenu .firstLevel a.selected {
 background-color: #333;
}

/* Drop-Down Menus */

.submenu {
 list-style: none;
 margin: 0;
 padding: 0;
 position: absolute;
}

.submenu > ul {
 top: 4px !important;
}

.submenu .secoundLevel {
 width: 200px;
 background: #fca500;
}

.submenu .secoundLevel a {
 display: block;
 color: #fff;
 padding: 8px 15px;
 border-top: 1px solid rgba(255,255,255,0.2);
}

.submenu .secoundLevel a:hover {
 background-color: #333;
 border-color: #1a1a1a;
}

.submenu .secoundLevel:first-child a {
 border-top: none;
}

有谁知道修复？

编辑，html：

<nav id="nav">
 <ul id="firstmenu" class="clearfix">
  <li class="firstLevel"><a href="index.php?id=99"  >Startseite</a></li>
  <li class="firstLevel current"><a href="index.php?id=91">Rootserver</a>
   <ul class="submenu">
    <li class="secoundLevel"><a href="index.php?id=96"  >Vergleich</a></li>
   </ul>
  </li>
  <li class="firstLevel"><a href="index.php?id=92">Voiceserver</a>
   <ul class="submenu">
    <li class="secoundLevel"><a href="index.php?id=97">Preisvergleich</a></li>
   </ul>
  </li>
 </ul>
</nav>
4

2 回答 2

1

我认为问题在于对 CSS 选择器的理解。这个选择器：

#firstmenu .firstLevel a.selected {
  color: #fff;
  background: url(images/nav-arrow.png) no-repeat center bottom;
}

声明如下：匹配所有 <a>具有类名的父级firstLevel和具有ID的父级的链接firstmenu

这意味着这个 HTML 位匹配：

<ul id="firstmenu" class="clearfix">
    // snip
    <li class="firstLevel current"><a href="index.php?id=91">Rootserver</a>
        <ul class="submenu">
            <li class="secoundLevel"><a href="#">Vergleich</a></li>
        </ul>
    </li>
    // snip

因为“secondLevel”菜单有一个<a>锚标签.firstLevel（#firstmenu

这正是 CSS 的工作方式，但有一些方法可以防止您看到的内容。

第一个选项是使用子选择器（我有时将其称为“直接后代”选择器）>

.firstLevel > a:hover{ /* code */ }

此选择器特别声明：“您悬停的所有锚标记都直接来自.firstLevel，但没有更深。

这意味着，它匹配：

<li class="firstLevel"><a href="#">A</a></li>

但不是下面带有值“B”的链接

<li class="firstLevel"><a href="#">A</a>
    <ul>
        <li><a href="#">B</b></li>
    </ul>
</li>

因为第二个<a>标签不是 的直接后代.firstLevel，所以它们之间有一个<ul>and <li>。

第二个选项是通过另一个具有更高CSS 特异性的规则来“覆盖”以前的样式。

#firstmenu .firstLevel .submenu a.selected {
  background-image: none; /* remove the arrow from drop-down menus*/
}

做其中一个是有原因的。

当样式非常特定于该元素时，使用子选择器会很好。您不希望任何样式延续到其他元素。

当您希望仅修改另一个元素的一种特定样式时，请使用“替换”技术（因为没有更好的术语）。IE。您想保留颜色、字体、字体粗细，但只想删除背景图像。

我希望这会有所帮助！

这里有一些（坏的）小提琴显示基本情况：

http://jsfiddle.net/zTCbF/

带子选择器

http://jsfiddle.net/zTCbF/1/

用替换技术

http://jsfiddle.net/zTCbF/2/

于 2013-04-21T23:18:38.897 回答
1 
#firstmenu .firstLevel a {

这将针对 .firstLevel 下的任何锚标记，包括 .secondLevel 下的锚标记

所以当你说...

#firstmenu .firstLevel a:hover,

您正在将悬停样式应用于所有 .firstLevel 后代的锚标记

你想说...

#firstmenu .firstLevel > a {

它将仅针对 .firstLevel 的直接后代的锚标记

于 2013-04-21T23:06:46.347 回答