ドロップダウンメニュー - ホバー状態での親のナビボタンで

Question

私はwww.glustik.com/dustreeproductions/index.php

で働いていますエンターテイメントリンクは、ドロップダウンメニューがあり、私が作るしようとしていますドロップダウン・ホバーがホバー状態になるように、親リンクを維持してください。 （それは意味がありますか？）また、これは近い将来ダブルドロップダウンになります。

マイCSS：

#nav ul li:hover ul#sub li a { 
display:block; 
background:#e6e6e6; 
color:#CC0066; 
padding:5px 15px 0px 25px; 
height:25px; 
width:290px; 
text-align: left; 
border-bottom: 1px solid #f2f2f2; 
border-right: none; 
margin: 0 0; 

} 

はHTML：

<div id="nav-box"> 
    <div id="main-nav"> 
     <div id="nav"> 
      <ul> 
       <li id="company"><a title="Company" href="http://www.glustik.com/dustreeproductions/company.php"></a></li> 
       <li id="entertainment"><a title="Entertainment" href="http://www.glustik.com/dustreeproductions/entertainment.php"></a> 
        <ul id="sub"> 
        <li id="dance"> <a href="http://www.jasontanzer.com/guitarist-original-music.asp">Dance</a></li> 
         <ul id="subDance"> 
          <li id="smiths"> <a href="http://www.jasontanzer.com/guitarist-original-music.asp">Smiths</a></li> 
         </ul> 
        <li id="classicRock"><a href="http://www.jasontanzer.com/guitarist-shows-covers.asp">Classic Rock | Top 40 | Rock</a></li> 
        <li id="country"><a href="http://www.jasontanzer.com/commercial-tv-film-jingles.asp">Country</a></li> 
        <li id="rockabilly"><a href="http://www.jasontanzer.com/composer.asp">Rockabilly | Reggae | Bluegrass | Other</a></li> 
        <li id="karaoke"><a href="http://www.jasontanzer.com/composer.asp">Karaoke | Live Band Karaoke | All Requests</a></li> 
        <li id="solos"><a href="http://www.jasontanzer.com/composer.asp">Solo's | Duo's | Trio's</a></li> 
        <li id="productionShows"><a href="http://www.jasontanzer.com/composer.asp">Production Shows</a></li> 
        <li id="dj"><a href="http://www.jasontanzer.com/composer.asp">DJ's</a></li> 
        </ul> 
       </li> 
       <li id="video"><a href="http://www.glustik.com/dustreeproductions/video.php"></a> 
       </li> 
       <li id="studio"><a href="http://www.glustik.com/dustreeproductions/studio.php"></a> 
       </li> 
       <li id="liveAudio"><a href="http://www.glustik.com/dustreeproductions/live-audio.php"></a> 
       </li> 
       <li id="eventPlanning"><a href="http://www.glustik.com/dustreeproductions/event-planning.php"></a> 
       </li> 
       <li id="contact"><a href="http://www.glustik.com/dustreeproductions/contact.php"></a> 
       </li> 
      </ul> 
     </div> <!-- end Nav --> 
    </div> <!-- end Main Nav --> 
</div> <!-- end Nav Box --> 

#nav ul li:hover ul#sub li a:hover { 
background:#CCC; 
color:#CC0066; 
} 

Answer 1

私はホバードロップダウンは、まだそのホバー状態になるように エンターテイメント親リンクを保つようにそれを作るしようとしています。

変更ここで選択：本に

#nav #entertainment a:hover { 
    background-position:0 -20px; 
} 

：

#nav #entertainment:hover > a 

意味：entertainmentのidとたび要素（すなわちnavのid有する要素内'S）任意のa要素（direct children）を選択します。

他のボタンごとに同じ変更を加える必要があります。

---

それは#nav #entertainment ..を使用するのに最適ではない - それは、「過度に適格セレクタ」（2 id秒）です。

#entertainment ..で十分です。

参照：http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

これは、任意の実用的な違いはありません - それはあなたが付着してみてくださいベストプラクティスですが、。