2011-12-19 11 views
0

純粋にCSSのドロップダウンメニューを作成し、ホバー効果を除いてすべて正常に動作します。水平メニューのオプションの1つをハイライトすると、赤い背景が表示され、最初のサブメニューが表示されます。ただし、サブメニューを移動すると、赤い背景が上のリンクから離れて表示されます。サブメニュー。私は移動しながら2番目と3番目のサブメニューを強調表示したいが、赤いホバー効果は一度に1つのリンクにしか残らない。下に私のCSSコードを与える私はそれをナビゲートすると、各サブメニューにアンカーするホバー効果を得るために何をする必要がありますか?また、アクションのメニューへのリンクはここで見つけることができます:http://www.clubkumite.com/menu.htmlCSS navメニューのホバーのドロップダウン問題

ありがとう!

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { 
    padding: 0; 
    margin: 0; 
     font-size: 100%; 
    font-weight: normal; 
} 
a { 

    text-decoration: none; 
    color: #47864D; 
} 

a:hover { 
    color: #F93; 
} 

#nav { 
    background-color: #F90; 
    text-align: center; 

} 

#nav ul { 
    display: table; 
    height: 30px; 
    margin-top: 0; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
    font-size: 14px; 
} 


#nav li { 
    display: table-cell; 
    position: relative; 
    width: 15em 
} 

#nav a { 
    display: block; 
    width: 15em; 
    color: #FFF; 
    background-color: #F90; 
    height: 35px; 
    font-size: 14px; 

} 

#nav a:hover { 
    background-color: #900; 
    width: 15em; 


} 

#nav li ul { 
    display: block; 
    position: absolute; 
    width: 15em; 
    left: -999em; 

} 

#nav li:hover ul { left: auto } 

#nav li li, #nav li li a { display: block } 

#nav li li a { width: auto; padding: 0 } 

#nav li ul ul { /* third-and-above-level lists */ 
    margin: -2em 0 0 15em; 
} 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ 
    left: auto; 
} 

答えて

4

変更#nav a:hover

#nav li:hover > a { 
    background-color: #900; 
    width: 15em; 
} 

#nav li:hover > aから >は、あなたが根底にあるサブメニュー(複数可)内のすべての a年代を選択していない確認します - それはちょうど、トップレベル aを選択します。

0

私のウェブサイトのリストCSSドロップメニューを使用しました。コードはとてもシンプルで、コードをチェックして同じコードを使用することができます。

www.onwebsoft.com

ちょうど私のsourseをコピーし、あなたの問題を解決することができます。 それはとてもシンプルで簡単です。 2番目のレベルのメニューが必要な場合は、私にコードを送信することを知らせてください。

ありがとう K

+0

解決策を適切に共有する方が良いです。 – devpro