0

現在、ネストされた順序付けられていないリストからドロップダウン メニューを作成しようとしています。メニューは機能していますが、スタイリングに関していくつか問題があります。ドロップダウンをトリガーする全体的なリンクはクリック可能で、青色の背景に白いテキストが必要ですが、ドロップダウン要素には全体的なナビゲーション コンテナーから継承される灰色の背景が必要です。テキストの色を変更するだけで済みますが、どの方法を試しても、ドロップダウンのテキストの色と見出しのリンクの色が常に変更されます。

私のCSSは、現在のディスプレイとメニューを生成するために使用されるhtmlの例とともに以下に見つけることができます:

/*CSS*/

#coolMenu,
#coolMenu ul {
list-style: none;
}

#coolMenu {
float: right;
}

#coolMenu > li {
float: left;
}

#coolMenu li a {
display: block;
/*height: 2em;
line-height: 2em;
*/
/*padding: 0 1.5em;*/
text-decoration: none;
color: #ffffff;
 }

#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}

#coolMenu li:hover ul {
display: block;
}

.dropdown a li{
color: #124162 !important;
}

#style_me > li > a{
color: #124162 !important;
}

/ HTML /

      <nav id="navigation" class="navigation">

        <ul>
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">Who Are We?</a></li>
            <li><a href="#">Why Join Us?</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>


   /* This is the menu element that needs styling */

        <ul id="coolMenu">
                             /* THis should be blue background white text */
            <li><a href="#" class="donate">Login / Register</a>
                <ul id="style_me">
                     /* These should be grey background blue text */
                                        <li><a href="#">Link 1</a></li>
                                        <li><a href="#">Link 2</a></li>
                                        <li><a href="#">Link 3</a></li>
                                        <li><a href="#">Link 4</a></li>
                                        <li><a href="#">Link 5</a></li>
                                        <li><a href="#">Link 6</a></li>
                                        <li><a href="#">Link 7</a></li>
                                    </ul>   
               </li>
        </ul>

           </nav>

どんな助けでも大歓迎です。CSS をやらなければならなくなってから数年が経ちましたが、私の記憶は少し不安定です!

ここに画像の説明を入力

4

1 に答える 1