1

我有一个完全用 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
}
4

2 回答 2

1

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

nav ul ul {
    display: none;
}
于 2013-04-04T19:02:32.993 回答
1

这有效

#topmenu li: 悬停在 {
    背景：线性渐变（#EEEEEE 0px，#D4D4D4 100%）重复滚动 0 0 透明；
    box-shadow: 2px 2px 5px #CCCCCC inset;
    颜色：绿色；
}

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

于 2013-04-04T19:20:07.310 回答