How to fix navBar hovering issue with buttons and <a href> in HTML

tcarpenter17

I have followed a tutorial on w3schools to make a mega menu.

I have changed some of the wording of the code but exactly like what is on the tutorial.

When I go to hover on button classes and , the hover with the background colour will not appear.

I have used the hover method :hover but that still does not fix the problem.

* {
    box-sizing: border-box;
}

.navBar {
    font-family: Arial;
    background-color: #333;
    overflow: hidden;
}

.navBar > a {
    float: left;
    font-size: 16px;
    color: #FFF;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menuDropDown {
    float: left;
    overflow: hidden;
}

.menuDropDown > #menuButton {
    font-size: 16px;
    border: none;
    outline: none;
    color: #FFF;
    padding: 14px 16px;
    background-color: inherit;
    font: inherit;
    margin: 0;
}

.navBar > a:hover > .menuDropDown:hover > #menuButton {
    background-color: #CCC;
}

.menuContent {
    display: none;
    position: absolute;
    background-color: none;
    width: 100%;
    left: 0;
    z-index: 1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.menuDropDown:hover > .menuContent {
    display: block;
}

.menuColumn {
    float: left;
    width: 25%;
    padding: 10px;
    background-color: #CCC;
    height: 250px;
}

.menuColumn > a {
    float: none;
    color: #000;
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.menuColumn > a:hover {
    background-color: #DDD;
}

.menuRow:after {
    content: "";
    display: table;
    clear: both;
}

<div class="navBar">
  <div class="menuDropDown">
    <button id="menuButton">Menu <i class="fas fa-bars"></i></button>
    <div class="menuContent">
      <div class="menuRow">
        <div class="menuColumn">
        </div>
      </div>
    </div>
  </div>
</div>

.navbar a:hover, .dropdown:hover .dropbtn { background-color: red; }

This section above from w3schools allows you to do this. I have reworded the code but used exactly the same method. It does not want to work.

Manish Patel

Try this:

#menuButton:hover,
.navBar > .menuDropDown:hover > #menuButton { 
    background-color: #CCC;
}

* {
    box-sizing: border-box;
}

.navBar {
    font-family: Arial;
    background-color: #333;
    overflow: hidden;
}

.navBar > a {
    float: left;
    font-size: 16px;
    color: #FFF;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menuDropDown {
    float: left;
    overflow: hidden;
}

.menuDropDown > #menuButton {
    font-size: 16px;
    border: none;
    outline: none;
    color: #FFF;
    padding: 14px 16px;
    background-color: inherit;
    font: inherit;
    margin: 0;
}

#menuButton:hover, /*This added */
.navBar > .menuDropDown:hover > #menuButton {
    background-color: #CCC;
}

.menuContent {
    display: none;
    position: absolute;
    background-color: none;
    width: 100%;
    left: 0;
    z-index: 1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.menuDropDown:hover > .menuContent {
    display: block;
}

.menuColumn {
    float: left;
    width: 25%;
    padding: 10px;
    background-color: #CCC;
    height: 250px;
}

.menuColumn > a {
    float: none;
    color: #000;
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.menuColumn > a:hover {
    background-color: #DDD;
}

.menuRow:after {
    content: "";
    display: table;
    clear: both;
}

<div class="navBar">
  <div class="menuDropDown">
    <button id="menuButton">Menu <i class="fas fa-bars"></i></button>
    <div class="menuContent">
      <div class="menuRow">
        <div class="menuColumn">
        </div>
      </div>
    </div>
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.