Jake Jake - 6 months ago 22
CSS Question

First menu item default dark grey in W3.CSS

The first menu item is dark grey on page entry

As you can see in the picture, the first menu item is defaulting to dark grey even though I have not specified this anywhere.I think this means it is active even when no mouseover.

Desired behaviour: Entire menu bar is light grey unless mouseover

W3 schools says:


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:


Here is my html code



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





Any help would be deeply appreciated

Answer

The W3.css file is setting that using the following css, notice the .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}
Comments