How to specify an address that is outside a set of div

Question

I made a menu with 'Hover' effect but I want to change the color of the gray bar of the menu by touching the cursor on the "Search and News" buttons but I do not know how to specify the address . navbar (responsible for the gray color of the menu bar) applying the 'Hover' effect on it, because it is main above the other Divs, there is some way to make the gray bar change color by touching the cursor on the 'search' and 'News' items' ??

body{background-color:#09C;}
.navbar{ overflow:hidden; 
background-color:#666; 
font-family:Arial, Helvetica, sans-serif;
}
.navbar a{float: left;
font-size: 16px;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none; 
}
.navbar a:hover, .menu:hover .bt{background-color: #0C0;
}

.menu{float: left;
overflow: hidden; 
}
.menu .bt{font-size: 16px; 
border: none;
outline: none;
color: #FFF;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin:0;
}
.menu:hover .sub{ display:block;
}
.sub{display: none;
position: absolute;
background-color:#f9f9f9;
min-width: 160px;
}
.sub a{float: none;
color: #000;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}

<div class="navbar">
<a href="#">Pesquisas</a>
<div class="menu">
<button class="bt">News</button>
  <div class="sub">
   <a href="#">Links</a>
   <a href="#">Links</a>
   <a href="#">Links</a>
  </div>
</div>
</div>

Answer 1

This was a way I found to fix this only with CSS

Guy using a combination of pseudo-elements ::after with the colors you need instead of using the background-color directly in the main html element you can.

Note that I didn’t touch your HTML, I did everything in CSS ::after and :hover::after

But I had to work on some of Navbar’s styles.... She was with overflow:hidden, and then I put the position:relativer needed to take out this overflow. To correct I put a value of height fixed.

    body{background-color:#09C;}
.navbar{ 
font-family:Arial, Helvetica, sans-serif;
position: relative;
height: 46px;
}
.navbar a{float: left;
font-size: 16px;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none; 
}
.navbar a:hover, .menu:hover .bt{background-color: #0C0;
}

/* estilos das cores*/
.navbar::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #666;
      top: 0;
      left: 0;
      z-index: -10;
    }
    .navbar a::after , .navbar .menu::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .navbar a:hover::after {
      background-color: #ff0000;
    }
    .navbar .menu:hover::after {
      background-color: #0000ff;
    }


.menu{float: left;
overflow: hidden; 
}
.menu .bt{font-size: 16px; 
border: none;
outline: none;
color: #FFF;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin:0;
}
.menu:hover .sub{ display:block;
}
.sub{display: none;
position: absolute;
background-color:#f9f9f9;
min-width: 160px;
}
.sub a{float: none;
color: #000;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}

  <div class="navbar">
    <a href="#">Pesquisas</a>
    <div class="menu">
      <button class="bt">News</button>
      <div class="sub">
        <a href="#">Links</a>
        <a href="#">Links</a>
        <a href="#">Links</a>
      </div>
    </div>
  </div>