0

子リンクにカーソルを合わせると、「パーソナルトレーニング」リンクとその他のドロップダウンリンクを強調表示しようとしています。

例：ユーザーが[パーソナルトレーニング]リンクにカーソルを合わせると、ドロップダウンメニューが表示されます。その後、彼がリストを下に移動している間、「パーソナルトレーニング」はまだ強調表示されています。

HTML：

    <ul id="nav">
        <li><a href="index.php">Home</a></li>
        <li><a href="personaltraining.php">Personal Training</a>
            <ul>
                <li><a href="signup.php">Sign Up</a></li>
                <li><a href="meetthetrainers.php">Meet The Trainers</a></li>
            </ul>
        </li>
    </ul>

CSS：

#header a {
    margin: 0px;
    padding: 10px;
    display: block;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    color: #000;
}
#nav a:hover {
    margin: 0px;
    padding: 10px;
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #000;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #FFF), color-stop(1, #00F));
}
#nav li ul {
    width: auto;
    position: absolute;
    display: none;
    background-color: #0F0;
    background-image: none;
}
#nav ul li:hover {
    width: auto;
    position: absolute;
    background-color: #00F;
    background-image: none;
}
#nav ul a:hover {
    background-color: #00F;
    background-image: none;
}
#nav li a:hover + a {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #FFF), color-stop(1, #00F));
}
#nav li:hover ul {
    display: block;
}

ドロップダウンメニューを表示するコードが機能し、ホバーされた単一のアイテムが強調表示されます。必要なのは、ドロップダウンリンクとその親リンクを強調表示する方法だけです。

よろしくお願いします、Slulego

4

1 に答える 1

0

サブメニューはulメニューヘッダーに含まれているため、スタイルを適用するのではなく、にスタイルをli適用する必要があります。このJSFiddleで実際の動作を確認してください。:hoverlia

CSSセレクター#nav a:hoverをに変更しました#nav > li:hover。

そして、言う必要はありませんが、そのJSFiddleの美学は最適とはほど遠いものです。私はそれを一緒にハックして、私が話していることを示しました:)

于 2012-11-07T18:26:21.030 に答える