CSS菜單鏈接保持突出顯示

Question

所以我想在一個CSS菜單我的手，我有一個簡單的錯誤，我無法修復，並沒有找到任何幫助搜索它。問題是，當我將鼠標懸停在下拉菜單上時，父鏈接保持突出顯示，文本恢復爲原始顏色。希望這可以解釋它。這裏是CSS代碼，我相信這是一個添加或修改一行代碼的問題。你可以檢查問題here，一切正常，直到你訪問一個子菜單（如在BAR或信息）。

#nav, #nav ul { 
    text-align: center; 
    text-size:16px; 
    float: left; 
    width: 750px; 
    height: 20px; 
    list-style: none; 
    line-height: 1; 
    background: white; 
    padding: 0; 
    border: solid #000; 
    border-width: 0px; 
    border-bottom-width: 1px; 
    margin: 0; 
    background-image: url('/images/bg.gif'); 
} 

#nav a { 
    display: block; 
    width: 75px; 
    height: 20px; 
    color: #0000FF; 
    text-decoration: none; 
} 

#nav a:hover { 
    display: block; 
    width: 75px; 
    height: 20px; 
    color: #FFF; 
} 

#nav li { 
    float: left; 
    padding: 0; 
    width: 75px; 
} 

#nav li ul { /*sub menu */ 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 75px; 
    border: solid #000; 
    border-width: 0px; 
    border-bottom-width: 1px; 
    border-top-width: 1px; 
    background-image: url('/images/submenu_bg.png'); 
} 

#nav li li { 
    width: 75px; 
} 

#nav li ul a { 
    width: 75px; 
} 

#nav li ul ul { 
    margin: -1.75em 0 0 14em; 
} 

#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 { 
    left: auto; 
} 

#nav li:hover, #nav li.sfhover { 
    height: 20px; 
    background: #0000FF; 
} 

Answer 1

你設置上#nav a:hover文本顏色，但背景顏色#nav li:hover。由於您的子菜單包含在li之內，因此即使光標位於子菜單中，它仍然會被視爲懸停。子菜單不是包含在鏈接中，因此它們不會保持突出顯示並恢復爲其正常顏色。如果您希望菜單項停止高亮顯示，請將background屬性改爲#nav a:hover。

前：

#nav a:hover { 
    display: block; 
    width: 75px; 
    height: 20px; 
    color: #FFF; 
} 

#nav li:hover, #nav li.sfhover { 
    height: 20px; 
    background: #0000FF; 
} 

後：

#nav a:hover, #nav li.sfhover a { 
    display: block; 
    width: 75px; 
    height: 20px; 
    color: #FFF; 
    background: #0000FF; 
} 

或者，如果你希望菜單住宿突出，而徘徊在子菜單中（這看起來更好，國際海事組織），移動color到li:hover。我知道這有點冗長，但它有效。 :-)

前：

#nav a:hover { 
    display: block; 
    width: 75px; 
    height: 20px; 
    color: #FFF; 
} 

#nav li:hover, #nav li.sfhover { 
    height: 20px; 
    background: #0000FF; 
} 

後：

#nav a:hover { 
    display: block; 
    width: 75px; 
    height: 20px; 
} 

#nav li:hover a, #nav li.sfhover a { 
    color:white; 
} 

#nav li:hover li a, #nav li.sfhover li a { 
    color:blue; 
} 

#nav li:hover li a:hover, #nav li.sfhover li a:hover { 
    color:white; 
} 

#nav li:hover, #nav li.sfhover { 
    color: #FFF; 
    height: 20px; 
    background: #0000FF; 
} 

Answer 2

你可以嘗試設置鏈接的顏色上li的懸停，像這樣：

#nav li:hover a { 
    color: #fff; 
} 

#nav li:hover li a 
{ 
    color: #0000FF; 
}