0

既存の Web ページの CSS を変更しています。ナビゲーション メニューは、アイテムが通常の状況では特定の背景色を持ち、アクティブまたはホバーされたときに別の色を持つリストの形式になっています。このための CSS コードは次のとおりです。

#navigation li a:hover,
#navigation li#active a {
    background: #104E91;
}

一部のメニュー項目 (この場合はリスト項目) には、サブページへのリンクを含むドロップダウン メニューがあります。ナビゲーションメニュー項目がアクティブな場合だけでなく、サブページの1つが開いている場合にも、ナビゲーションメニュー項目に「アクティブな」背景色を持たせようとしています。これを実装する方法はありますか？ドロップダウン メニューのコードは次のようになります。

#wsite-menus .wsite-menu li:first-child {
    border-top: 1px solid #000;
}

#wsite-menus .wsite-menu li a {
    padding: 8px;
    color: #fff;
    background: #2f2f2f;
    border: 1px solid #4b4b4b;
    border-top: none;
}

#wsite-menus .wsite-menu li a:hover {
    background: #4b4b4b;
}

これを実現する方法は、上記の 2 つのコード ブロックの最初の部分を次のように変更することだと思います。

#navigation li a:hover,
**#navigation li#active child,**
#navigation li#active a {
    background: #104E91;
}

または似たようなものですが、正確な構文がわかりません。開いている子ページで親ページがナビゲーション メニューでアクティブに見えるようにする方法はありますか?

HTML は次のとおりです。

<div id = "navigation">
    <ul class = "wsite-menu-default">
        <span id = "Span1" class = "wsite-nav-handle"> style="display:                 inline;">
          <li class="w-menu-item  wsite-nav-0" style="position: relative;">

…など、リスト項目が多数あります。リスト項目にアクティブな背景色を与える別のスパンを作成し、各子ページで、ページの親のメニュー項目を担当するリスト項目の周りにそのスパンを配置する必要があると思います。

4

2 に答える 2