Question

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

子菜单类（如果您悬停firstmenu，则为下拉列表）。 '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>

Answer 1

#firstmenu .firstLevel a {

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

下的锚标记

所以当你说...

#firstmenu .firstLevel a:hover,

您正在将悬停样式应用于作为.firstLevel

后代的所有锚标记

你想说...

#firstmenu .firstLevel > a {

其中仅定位作为.firstLevel

的直接后代的锚标记

Answer 2

我认为问题在于理解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的孩子（任何顺序，即孩子，孙子，曾孙等）（{1}}的任何顺序。

这正是CSS假设工作的方式，但有办法阻止你所看到的。

第一个选项是使用child selector（我有时称之为“直接后代”选择器）#firstmenu

此选择器明确指出：“您悬停的所有锚标记直接从.firstLevel > a:hover{ /* code */ }后代，但没有更深。

这意味着，匹配：

.firstLevel

但不是

以下值为“B”的链接

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

因为第二个<li class="firstLevel"><a href="#">A</a> <ul> <li><a href="#">B</b></li> </ul> </li>标记不是<a>的直接后代，所以它们之间有.firstLevel和<ul>。

第二个选项是通过使用具有更高CSS specificity的其他规则来“覆盖”以前的样式。

<li>

有理由做其中一个。

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

当您想要从另一个元素中仅修改一个特定样式时，请使用“替换”技术（缺少更好的术语）。 IE浏览器。您希望保留颜色，字体，字体粗细，但只想删除背景图像。

我希望有所帮助！

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

http://jsfiddle.net/zTCbF/

带有子选择器

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

使用替换技术

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

CSS：子菜单上应用的第一个菜单层的类

2 个答案: