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