-4

I want to make the dropdown menu stay the same text color while hovering over the links and hovering over dropdown (it changes color when you go from hovering over dropdown to hovering over the links) in the dropdown menu.

Here is what I currently have:

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile phones */
}

.dropdown .dropbtn:hover {
  color: black;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
<div class="topnav">
  <a class="active" href="index.html">Home</a>
  <a href="products.html">Products</a>
  <a href="contact.html">Contact</a>
  <a href="about.html">About Us</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>
Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
Trenton Adams
  • 44
  • 4
  • [Welcome To StackOverflow](http://stackoverflow.com/tour) - Please read our [ask] page for suggestions on how to improve this question – blurfus Apr 13 '18 at 00:03
  • 1
    Yep, it's possible. There are hundreds of selectors like sibling selectors and descendant selectors, which you can use. `:)` It totally depends on the HTML structure you have. – Praveen Kumar Purushothaman Apr 13 '18 at 00:05

1 Answers1

1

Remove color:black from the .topnav a:hover selector:

.topnav a:hover {
  background-color: #ddd;
 /* color: black; */
}

This leaves all anchor elements as color #f2f2f2 except the active one.

EDIT:

Sorry, I misread your question. Change this:

.dropdown .dropbtn:hover {
  color: black;
}

To this:

.dropdown:hover .dropbtn {
  color: black;
}

Because both the links and .dropbtn are contained within .dropdown, you're still hovering over it.

Jason
  • 871
  • 1
  • 8
  • 18