2

Web サイトを立ち上げようとしていますが、動的メニューに問題がありました。より具体的には、ドロップダウン メニューを含むようにテンプレートを調整しました。一部のメニュー項目には、カーソルが上にあるときに表示されるサブリストが含まれます。さらに、メイン アイテムは、マウス オーバー時およびユーザーがその特定のページにいるときに背景を変更する必要があります。

私が取得したいのは、サブページにアクセスしているときはいつでもメイン メニュー項目のみが強調表示されることですが、残念ながらこれは起こりません。メインアイテムを選択したときに背景を切り替えることができません。その理由はわかりません。

関連する CSS は次のとおりです。

#menu {
    background: #65b63a;
    clear: both;
    height: 30px;
    border: 1px solid #65b63a;
    padding:0;
    margin:0;
}

#menu ul li.active a, #menu ul li:hover {
    background:url('images/menuover.jpg') repeat-x bottom;
}

#menu ul {
    list-style: none;
    float:left;
    margin:0;
    padding:0;
    font-size:10pt;
}    

#menu ul li {
    background: #65b63a;
    position:relative;
    display: block;
    float: left;
    margin-right: 1px;
    font-size: 10pt;
    text-transform:uppercase;
    line-height: 30px;
    padding:0;
    margin:0;
    border-right:1px #aeaeae solid;
}

#menu ul li a {
    display: block;
    float: left;
    padding: 0 17px;
    color: #FFFFFF;
    text-decoration: none;
}


#menu ul li.sub a{
    background-image:none;
}

#menu ul li ul{
    display:none;
}

#menu ul li ul li{
    padding:0;
    margin:0;
}


#menu ul li:hover ul{
    background:none;
    display:block;
    position:absolute;
    width:200px;
    padding-top:30px;
    margin:0;
    font-size:10pt;
}

#menu ul li ul a:hover {
    text-decoration:underline;
    background:none;
}

#menu ul li li{
    width:200px;
    font-size:10pt;
    background-image:none;
    text-transform:none;

}

そして、関係する HTML は次のとおりです。

        <div id="menu">
            <ul>
               <li><a href="index.html">Home</a></li>  <!-- this one is a single item -->
                <li class="active"><a href="#">Chi? Dove? Quando?</a> <!-- this should be "active" but it isn't -->
                    <ul>
                        <li class="sub"><a href="chi.html">Chi siamo</a></li>
                        <li class="sub"><a href="dove.html">Dove siamo</a></li>
                        <li class="sub"><a href="orari.html">Orari</a></li>
                        <li class="sub"><a href="staff.html">Lo staff</a></li>
                        <li class="sub"><a href="contatti.html">Contatti</a></li>
                    </ul>
                </li>
            </ul>
        </div>

問題は CSS にあると思いますが、うまくいきません。

前もって感謝します、 ロレンツォ

PS 参考までに、ウェブサイト @ http://www.pansepol.it/rawのraw を見つけることができます 。ホームページは単品ページの例で、「Viaggi di Gruppo」>「Asia」は例です。マルチレベル。ご覧のとおり、この最後のページに移動している間、「Viaggi di Gruppo」はまったく強調表示されていません。

編集： - - - - - - - - - - - - - - - - - - - - - - - - -----------

ばかげて、それはとても簡単でした。「アクティブ」クラスを<li>要素に適用し、Justus と Raad が提案したように CSS を修正しました。

コードは次のようになります。

#menu ul li.active a, #menu ul li:hover {
    background:url('images/menuover.jpg') repeat-x bottom;
}

と

<li class="active"><a href="#">Chi? Dove? Quando?</a>
                <ul>
                    <li class="sub"><a href="chi.html">Chi siamo</a></li>
                    <li class="sub"><a href="dove.html">Dove siamo</a></li>
                    <li class="sub"><a href="orari.html">Orari</a></li>
                    <li class="sub"><a href="staff.html">Lo staff</a></li>
                    <li class="sub"><a href="contatti.html">Contatti</a></li>
                </ul>
            </li>

すべてがスムーズに機能します。

ありがとうございました、

ロレンツォ

4

2 に答える 2

0

「ホーム」ページでは、「アクティブ」クラスが<li>要素に適用されています。しかし、"Viaggi di Gruppo" > "Asia"<a>では代わりに要素に適用されます。いずれかにする必要があり、必要に応じて CSS で調整します。

于 2013-02-18T14:27:12.720 に答える