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

我无法让你的网站加载，所以我刚刚为你做了这个小提琴，有很多评论来推断CSS 我为你做了这个小提琴http://jsfiddle.net/kevinPHPkevin/PknRT/

nav ul ul {
    display: none;
}

Answer 2

这有效

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

我刚刚在那里复制了你的代码。

下拉列表中的顶级菜单项

2 个答案: