CODEWITHSUNDEEP
htmlcss
Shadow
Shadow

Reputation: 421

How to make colour of menu item change when hovering over the sub-menu

Ok, i am gonna try to explain this as well as i can. I want to have a dropdown menu and when you hovering over the sub item of the menu item, I want ONLY that menu item to be a different colour but the sub menu items should stay the same.

Using the li:hover method, makes both the sub menu and the menu item change to that color. Is there any way to only change the top menu item when the sub menu is being hovered over?

Thanks in advance

EDIT: here is my current CSS

.dropdown-horizontal-container
{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
ul.dropdown li ul li
{
  border-bottom: #FFF 1px solid;

}
ul.dropdown li 
{
  position: relative !important;
  display: block !important;
}
ul.dropdown li a 
{
    position: relative !important;
  display: block !important;
  padding: 10px 15px !important;
}
ul.dropdown li a:hover
{
  color:#428bca !important;
}

PS: this is overwriting the css generated by a wordpress plugin. Not quite sure how to post the code it generates...if it helps the plugin is http://wordpress.org/plugins/dropdown-menu-widget/

Upvotes: 0

Views: 1893

Answers (2)

Shadow
Shadow

Reputation: 421

Since i was short on time, I took the easy way out and removed the background for the hover so i didnt need to change the link color when hovering over the sub menu items. I am going to look into Jquery as some people suggested later on though to see if i cna get it working.

Upvotes: 0

Nurgiel
Nurgiel

Reputation: 180

How about:

ul.dropdown:hover {
    background-color:#fff;
} 

ul.dropdown li:hover {
    background-color:#3e3e3e;
    display:block;
}

Upvotes: 1

Related Questions