Issue changing each li items hover color

Question

this is the reference link: http://www.mytwins.gr/site/

This is a wordpress theme. I editing the css because I want to change the hover color for each menu li item. This is the code I tried till now

#menu-item-43 a:hover {background-color: rgb(161, 204, 58) !important;}

• The problem is that the same method doesnt work in the other items. WHY?

• I then tried to use css3 nth elements to select the specific li item I want. An example below

   #topnav li:nth(4) a:hover {background-color:black;}
  

The above also doesnt work. Any ideas for how to change each menu items color? Thanks in advance

Answer 1

If you are using a repeatable item, like menu-item, you should use classes. When you use # you are selecting the element by the id, which should be unique to the entire document. There are some cases where the selector will only select the first item that matches the id as it should be unique.

EG:

.menu-item a:hover { background-color: rgb(161, 204, 58) !important;} }

Answer 2

Look at the selector you are using to give the <a> element its background colour:

#topnav li.current-menu-item > a, #topnav li.sfHover > a, #topnav li a:hover

Your selector has to be more specific than that, and #menu-item-43 a:hover will not suffice. Why not try:

#menu-item-43 > a, #menu-item-43 > a:hover { ... }

Answer 3

It probably has something to do with the specificity of the links you are trying to change the color on. If you are unfamiliar with css specificity here is a great reference: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Basically CSS is applied to elements in the DOM based on their specificity, so the way you try to apply CSS using selectors vs inline etc.. has an effect on which elements will actually have said CSS applied to them.