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

これは機能します

#topmenu li:ホバー {
    background: linear-gradient(#EEEEEE 0px, #D4D4D4 100%) 繰り返しスクロール 0 0 透明;
    ボックスシャドウ: 2px 2px 5px #CCCCCC インセット;
    色: 緑;
}

そこにあなたのコードをコピーしました。

于 2013-04-04T19:20:07.310 に答える
1

私はあなたのウェブサイトをロードすることができないので、私はあなたのためにこのフィドルをやったCSSを説明する多くのコメントであなたのためにこのフィドルをやったhttp://jsfiddle.net/kevinPHPkevin/PknRT/

nav ul ul {
    display: none;
}
于 2013-04-04T19:02:32.993 に答える