How to change the menu color by hovering over

Asked

Viewed 1,940 times

1

I implemented a CSS on my system where I hover over the menu and display the submenus.

This is the CSS to hover over the menus

ul.nav li.dropdown:hover ul.dropdown-menu
{ 
    display: block; 
}

only that is the following, when I move the mouse over these menus I would like the color to change as if it were the click as shown in the photos below:

Clicking on the Menu:
inserir a descrição da imagem aqui

Without clicking on the menu:
inserir a descrição da imagem aqui

css

1 answer

2


Just define the property background-color using the selector ul.nav li.dropdown:hover.

ul.nav li.dropdown:hover
{ 
    background-color: algumTomDeAzulAqui;
}

ul.nav li.dropdown:hover ul.dropdown-menu
{ 
    display: block; 
}

  • with the background-color submenu that changes color

  • @Leonardomacedo I forgot to take the end of the selector, try this way

  • removing the ul.dropdown-menu the menu is the right color but the submenu does not appear

  • No, @Leonardomacedo You have to keep both CSS.

  • It worked! Thank you very much! in 5 minutes I put as positive here!

  • I’ve already put as positive more as it’s related to the question I wanted to know one more thing. I found something here too, I don’t know if this can be done by css too, when I click on the menu and pass the mouse on the other, the menu I clicked does not disappear, and opens what I passed the mouse by css I can fix it ?

  • You get it, but although it has to do with the current question, I think it’s something else. It would be better to open a new question, don’t you think? Besides, a more detailed example of the menu will be needed...

  • beauty I’ll open here

  • created https://answall.com/questions/211448/passar-mouse-no-menu-e-displar-submenus

Show 4 more comments

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.