下拉菜单中的顶级菜单项

Question

我有一个完全用CSS（无JS）制作的下拉菜单。我希望顶层菜单项在我的鼠标悬停在下拉菜单上时保持突出显示，但我无法弄清楚。

以下是我在谈论的一个例子：当您将光标放在下拉列表中，顶级项目会恢复为默认颜色...

任何人都可以提供帮助的？是否有一个规则可以解决这个问题？

这里是CSS：

nav { 
    z-index: 10001; 
    position: relative; 
    display: block; 
    width: 100%; 
    height: 45px; 
    text-transform: uppercase; 
    border-bottom: 1px solid white; 
    color: white; 
    text-shadow: none; 
    text-align: center 
} 
nav a { 
    text-decoration: none 
} 
#topmenu { 
    position: relative; 
    text-align: left; 
    left: 2% 
} 
nav ul { 
    white-space: nowrap; 
    list-style: none; 
    position: relative; 
    display: inline-block 
} 
nav ul ul { 
    visibility: hidden; 
    opacity: 0; 
    -webkit-opacity: 0; 
    -moz-opacity: 0; 
    transition: opacity .3s linear,visibility .3s linear; 
    -webkit-transition: opacity .3s linear,visibility .3s linear; 
    -moz-transition: opacity .3s linear,visibility .3s linear; 
    -o-transition: opacity .3s linear,visibility .3s linear 
} 
nav ul ul li: last-child { 
    -webkit-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -moz-border-radius-bottomright: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    border-bottom-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
    border-bottom: 1px solid #afafaf 
} 
nav ul li a: hover { 
    padding: 13px 20px; 
    color: green 
} 
nav ul ul { 
    padding: 0; 
    position: absolute 
} 
nav ul ul li { 
    float: none; 
    position: relative; 
    border: 1px solid #afafaf; 
    border-bottom: 1px solid #b7b7b7; 
    border-top: 1px solid #fff; 
    background: -webkit-linear-gradient(#eee 0,#d4d4d4 100%); 
    background: linear-gradient(#eee 0,#d4d4d4 100%); 
    background: -moz-linear-gradient(#eee 0,#d4d4d4 100%); 
    background: -o-linear-gradient(#eee 0,#d4d4d4 100%); 
    -moz-box-shadow: inset 2px 2px 5px #ccc; 
    -webkit-box-shadow: inset 2px 2px 5px #ccc; 
    box-shadow: inset 2px 2px 5px #ccc; 
    filter: progid: DXImageTransform.Microsoft.Shadow(color=#ccc,Direction=134,Strength=5); 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#d4d4d4') 
} 
nav ul ul li a { 
    padding: 13px 20px; 
    color: #063058 
} 
nav ul li: hover>ul { 
    visibility: visible; 
    opacity: 1; 
    -moz-opacity: 1; 
    -webkit-opacity: 1 
} 
nav ul li { 
    float: left 
} 
#topmenu li a: hover { 
    color: #fff 
} 
#topmenu li a: hover { 
    color: green; 
    background: -webkit-linear-gradient(#eee 0,#d4d4d4 100%); 
    background: linear-gradient(#eee 0,#d4d4d4 100%); 
    background: -moz-linear-gradient(#eee 0,#d4d4d4 100%); 
    -moz-box-shadow: inset 2px 2px 5px #ccc; 
    -webkit-box-shadow: inset 2px 2px 5px #ccc; 
    box-shadow: inset 2px 2px 5px #ccc; 
    filter: progid: DXImageTransform.Microsoft.Shadow(color=#ccc,Direction=134,Strength=5); 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#d4d4d4') 
} 
nav ul li a { 
    display: block; 
    padding: 13px 20px; 
    color: white 
} 
nav ul ul ul { 
    position: absolute; 
    left: 100%; 
    top: 0 
} 

Answer 1

这工作

#topmenu li:hover a { 
    background: linear-gradient(#EEEEEE 0px, #D4D4D4 100%) repeat scroll 0 0 transparent; 
    box-shadow: 2px 2px 5px #CCCCCC inset; 
    color: green; 
}

I`veĴ ust在那里复制你的代码。

Answer 2

我不能让你的网站加载，所以我刚刚做了这个捣鼓你有很多的意见expalaining的CSS 我已经这样做了捣鼓你http://jsfiddle.net/kevinPHPkevin/PknRT/

nav ul ul { 
    display: none; 
}