css - 下拉菜单中的顶级菜单项

Question

我有一个完全用 CSS(没有 JS)制作的下拉菜单。当我将鼠标悬停在其下拉菜单上时，我希望顶级菜单项保持突出显示，但我不知道该怎么做。

这是我正在谈论的示例:当您将光标放在下拉菜单上时，顶级元素会恢复默认颜色...

有人可以帮忙吗？ CSS 中是否有一条规则可以解决这个问题？

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

我刚刚复制了你的代码。