W3.CSS 中的第一个菜单项默认为深灰色

Question

正如您在图片中看到的，第一个菜单项默认为深灰色，尽管我没有指定它anywhere.I认为这意味着即使没有鼠标悬停它也是活动的。

期望的行为：除非鼠标悬停，否则整个菜单栏都是浅灰色

W3 学校说：

Navigation Bar with Dropdown Note: When the dropdown menu is "open", the dropdown link gets a grey background color to indicate that it is active. To override this, add a w3-hover-color class to both the "dropdown" li and a:

这是我的 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>

 <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>

任何帮助将不胜感激

Answer 1

导航栏和悬停颜色相同，所以我不明白如何获得可见的悬停颜色变化。尽管如此，只要给第一个列表项一个 w3-light-grey class 这将解决你的问题，给出你想要的输出。

<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>

更新代码和fiddle http://jsfiddle.net/eyjqrh85/1/

Answer 2

W3.css 文件使用以下 css 进行设置，请注意 .w3-dropdown-hover:first-child.

.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) 即可，但这似乎有点麻烦，因为这会强制站点上的所有导航栏共享颜色。但是，这可能是 w3c 中的一个缺陷，因为老实说我没有看到其他解决方案。所以我接受这个

W3.CSS 中的第一个菜单项默认为深灰色

First menu item default dark grey in W3.CSS

html

css

navigation