0

ナビゲーションメニューがあります。しかし、メニューはワイルドです。

サブメニュー クラス (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>
4

2 に答える 2

1 
#firstmenu .firstLevel a {

これは、.secondLevel の下のものを含む .firstLevel の下のすべてのアンカー タグをターゲットにします。

だから言うと…

#firstmenu .firstLevel a:hover,

.firstLevel の子孫であるすべてのアンカー タグにホバー スタイルを適用しています

あなたは言いたい...

#firstmenu .firstLevel > a {

.firstLevel の直接の子孫であるアンカー タグのみをターゲットにします。

于 2013-04-21T23:06:46.347 に答える