W3.CSS

Question

の最初のメニュー項目のデフォルト濃い灰色あなたが写真で見ることができるように、最初のメニュー項目は、私はこのanywhere.Iを指定していないにもかかわらず、濃い灰色をデフォルトされるが、これはそれがあることを意味だと思いますマウスオーバーがなくてもアクティブです。

望ましい行動：

ナビゲーションバーをドロップダウン 注意して：ドロップダウンメニューが「オープン」である場合には、ドロップダウンリンクを取得するマウスオーバー

W3学校は述べていない限り、全体のメニューバーにはライトグレーです灰色の背景色は、アクティブであることを示します。これを無効にするには、 "ドロップダウン" Liとの双方にW3-ホバー色のクラスを追加します。ここでは

は私のhtmlコード

<ul class="w3-navbar w3-light-grey w3-border"> 
 
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 0</a> 
 

 
\t <div class="w3-dropdown-content w3-white w3-card-4"> 
 
\t \t <a href="www.i-koda.com">link name 0</a> 
 
\t \t <a href="www.i-koda.com">link name 1</a> 
 
\t \t <a href="www.i-koda.com">link name 2</a> 
 
\t \t 
 

 
\t </div></li> 
 
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 1</a> 
 

 
\t <div class="w3-dropdown-content w3-white w3-card-4"> 
 
\t \t <a href="www.i-koda.com">link name 0</a> 
 
\t \t <a href="www.i-koda.com">link name 1</a> 
 
\t \t <a href="www.i-koda.com">link name 2</a> 
 
\t \t 
 

 
\t </div></li> 
 
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 2</a> 
 

 
\t <div class="w3-dropdown-content w3-white w3-card-4"> 
 
\t \t <a href="www.i-koda.com">link name 0</a> 
 
\t \t <a href="www.i-koda.com">link name 1</a> 
 
\t \t <a href="www.i-koda.com">link name 2</a> 
 
\t \t 
 

 
\t </div></li> 
 
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 3</a> 
 

 
\t <div class="w3-dropdown-content w3-white w3-card-4"> 
 
\t \t <a href="www.i-koda.com">link name 0</a> 
 
\t \t <a href="www.i-koda.com">link name 1</a> 
 
\t \t <a href="www.i-koda.com">link name 2</a> 
 
\t \t 
 

 
\t </div></li> 
 
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 4</a> 
 

 
\t <div class="w3-dropdown-content w3-white w3-card-4"> 
 
\t \t <a href="www.i-koda.com">link name 0</a> 
 
\t \t <a href="www.i-koda.com">link name 1</a> 
 
\t \t <a href="www.i-koda.com">link name 2</a> 
 
\t \t 
 

 
\t </div></li> 
 

 
</ul>

にすべてのヘルプは次のようになりますです深く感謝

Answer 1

W3.cssファイルには、次のCSSを使用して、.w3-ドロップダウン・ホバーに気づくことを設定しています。オリジナルポスターに追加

.w3-sidenav .w3-dropdown-hover:hover,.w3-sidenav .w3-dropdown-hover:first-child,.w3-sidenav .w3-dropdown-click:hover{background-color:#ccc;color:#000} 

：

単にライトグレーに背景色を変更（＃はf2f2f2）動作しますが、これは上のすべてのnavbarsを強制するようハックのビットのようです色を共有するサイト。 しかし、これは私が正直に別の解決策を見ないので、w3cの欠陥かもしれません。だから私はこの1つを受け入れる

Answer 2

navbarとホバーは同じ色ですので、どのように見えるホバーの色の変化を得ることができるのか分かりません。それにもかかわらず、最初のリストアイテムにw3-light-greyクラスを指定すると、これが問題を解決して、望ましい出力を与えます。第一子：

<ul class="w3-navbar w3-light-grey w3-border"> 
        <li class="w3-dropdown-hover w3-light-grey w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 0</a> 

         <div class="w3-dropdown-content w3-white w3-card-4"> 
          <a href="www.i-koda.com">link name 0</a> 
          <a href="www.i-koda.com">link name 1</a> 
          <a href="www.i-koda.com">link name 2</a> 


         </div></li> 
        <li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 1</a> 

         <div class="w3-dropdown-content w3-white w3-card-4"> 
          <a href="www.i-koda.com">link name 0</a> 
          <a href="www.i-koda.com">link name 1</a> 
          <a href="www.i-koda.com">link name 2</a> 


         </div></li> 
        <li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 2</a> 

         <div class="w3-dropdown-content w3-white w3-card-4"> 
          <a href="www.i-koda.com">link name 0</a> 
          <a href="www.i-koda.com">link name 1</a> 
          <a href="www.i-koda.com">link name 2</a> 


         </div></li> 
        <li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 3</a> 

         <div class="w3-dropdown-content w3-white w3-card-4"> 
          <a href="www.i-koda.com">link name 0</a> 
          <a href="www.i-koda.com">link name 1</a> 
          <a href="www.i-koda.com">link name 2</a> 


         </div></li> 
        <li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 4</a> 

         <div class="w3-dropdown-content w3-white w3-card-4"> 
          <a href="www.i-koda.com">link name 0</a> 
          <a href="www.i-koda.com">link name 1</a> 
          <a href="www.i-koda.com">link name 2</a> 


         </div></li> 

       </ul> 

更新されたコードとフィドル http://jsfiddle.net/eyjqrh85/1/