1

デフォルトのスタイルのナビゲーションメニューがあります...

<nav>   
 <ul id="MenuBar1" class="MenuBarHorizontal">
  <li>
   <a href="#">Home</a>
  </li>
  <li>
   <a class="MenuBarItemSubmenu" href="membership.php">Membership</a>
   <ul>
    <li><a href="#">General</a></li>
    <li>
     <a class="MenuBarItemSubmenu" href="#">Adult</a>
     <ul>
      <li><a href="#">Beginner</a></li>
      <li><a href="#">Intermediate</a></li>
      <li><a href="#">Advanced</a></li>
     </ul>                    
    </li>
   [...]
</nav>

何とかこのようなスタイリングがあります：

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a {
 display: block;
 cursor: pointer;
 background-color: #000;
 padding: 0.5em 0.75em;
 color: #FFF;
 text-decoration: none;
}
/* Menu items that have mouse over or focus have an off-white background and dark text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
 background-color: #EEE;
 color: #333;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with an off-white background and dark text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
 background-color: #EEE;
 color: #333;
} /* And so on... */

しかし、サブメニューと、強調表示されている項目については、何か違うものが必要です。この質問は特にそれについてではありません。なぜなら、私は、最もエレガントではないにしても、理にかなっている解決策を持っているからです。それは、まったく異なるセレクターを構築することです。

#topitem:hover, #topitem:focus {
 background-color: #FFF;
 color: #000;
}

#subitem:hover, #subitem:focus{
 background-color: #FFF;
 color: #000;
}

次に、対応するHTMLを取得します

<nav>   
 <ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="#" id="topitem">Home</a></li>
  <li><a class="MenuBarItemSubmenu" id="topitem" href="membership.php">Membership</a>
 <ul> ...

これは正常に機能しますが、えーと、IDのインスタンスは複数存在しないようにする必要があります。だから私は言う、K、これらをクラスとして持っていこう：

CSS

.topitem:hover, .topitem:focus {
 background-color: #FFF;
 color: #000;
}

.subitem:hover, .subitem:focus {
 background-color: #FFF;
 color: #000;
}

HTML

 <nav>  
  <ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a href="#" class="topitem">Home</a></li>
   <li><a class="MenuBarItemSubmenu topitem" href="membership.php">Membership</a>
    <ul> ...

しかし、驚いたことに、これはまったく機能しません...

誰かアイデアはありますか？

4

1 に答える 1

1

IDのCSSルールは常にクラスのCSSルールよりも優先されるため、ID化されたバージョンは機能しました。

クラスのスタイル設定は、スタイルシートでルールが宣言されるタイミングにも依存します。

デフォルトのスタイルを宣言する前にサブアイテムのスタイルを宣言すると、デフォルト<li>のスタイルが優先されます。必要なスタイルルールをデフォルトスタイルの下に移動すると、問題が解決するはずです。

于 2012-10-31T15:30:19.573 に答える