純粋に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;
}
解決策を適切に共有する方が良いです。 – devpro