CSS下拉導航菜單懸停問題

我創建了一個純粹在CSS中的下拉導航菜單，除了懸停效果，一切正常。當我點亮水平菜單中的某個選項時，它將顯示紅色背景並將第一個子菜單向下，但是一旦我移動子菜單，紅色背景將從頂部鏈接移開，然後繼續在我突出顯示的任何鏈接子菜單。我還有第二級和第三級子菜單，我想在移動時突出顯示，但紅色懸停效果一次只能保留在一個鏈接上。鑑於我的CSS代碼低於我需要做什麼來讓懸停效果錨定在每個子菜單上，當我瀏覽它。另外鏈接到菜單的行動可以在這裏找到：http://www.clubkumite.com/menu.html CSS下拉導航菜單懸停問題

謝謝！

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; 
}

來源

2011-12-19 Reddyfire

變化#nav a:hover到#nav li:hover > a

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

的>確保你不是底層的子菜單（S）內選擇所有a的 - 它只是選擇頂層a。

來源

2011-12-19 16:54:54 ptriek

我用我的網站的列表CSS下拉菜單。代碼非常簡單，您可以檢查代碼並使用相同的代碼。

www.onwebsoft.com

只需複製我的SOURSE，你可以解決您的問題。這是如此簡單和容易。如果你需要二級菜單，讓我知道我會給你發送代碼。

謝謝 K

來源

2015-12-23 05:40:23 Kham

它更好地分享正確的解決方案。 – devpro 2015-12-23 05:46:10

CSS下拉導航菜單懸停問題

回答

相關問題