CODEWITHSUNDEEP
htmlcss
user3546035
user3546035

Reputation: 47

html drop down menu color

I have a a drop down menu with color black , i use a color red when i hover on it, my problem is that when i go to drop down menu the color turn from red to black , what i want is for example i hover on about the color of about turn red a drop down menu appears , when i go to that menu of about to color on about turn back to black, i want the color to be red until i leave the drop down menu.

HTML CODE

<ul class="drop_menu">
    <li>
      <a href="#">Home</a></li>
          <li><a href="#">about</a></li>
             <ul> 
               <li>contact us</li>
               <li>about us</li></ul>
          <li><a href="#">Home2</a></li>
</ul>

CSS CODE

.drop_menu > li > a:hover {
          color: red;
        }
        .drop_menu li:hover ul {
        background: #484f57;
        }
        .drop_menu li:hover ul li a {
        display:block;
        background-color:#484f57;
        color: #ddd;
        }

Upvotes: 0

Views: 312

Answers (3)

Guy
Guy

Reputation: 11315

You need to move your sub-menu inside the <li> tag for about like so:

<ul class="drop_menu">
  <li><a href="#">Home</a></li>

  <li><a href="#">about</a>
    <ul>
      <li>contact us</li>
      <li>about us</li>
    </ul>
  </li>

  <li><a href="#">Home2</a></li>
</ul>

Then you can use:

.drop_menu li:hover a {
  color: red;
}

This will cause the <a> tag to be red when the <li> is hovered on and because the sub-menu <ul> is now within the parent <li> the color will stay red.

Here is a demo with the color of the parent menu item in red when hovering on the sub-menu.

Upvotes: 1

user3518892
user3518892

Reputation:

Try to use if i understand you :

.drop_menu a{
    color:black;
    text-decoration:none;
}
.drop_menu > li > a:hover {
  color: red;

}
.drop_menu li ul {
  display: none;

}
.drop_menu li:hover ul {
  display: block;
background: #484f57;
}
.drop_menu li:hover ul li a {
display:block;
background-color:#484f57;
color: #ddd;
}

Upvotes: 0

Clayton
Clayton

Reputation: 444

You need to use the hover selector for the .drop_menu instead of using it on the , which is why it currently goes back to black when you move your mouse off the anchor tag.

Something like this, instead:

.drop_menu:hover {
      color: red;
}

Upvotes: 0

Related Questions