Change horizontal css menu the hover color from green to red

Q: I'm using the Mac - Dark Green theme and I want to change the hover color
from green to red. When I put in the red color code it looks like crap, not
like the crisp nice green color.

A: Please, open the generated .css file in any text editor and find the code:

ul#css3menu1 li:hover > a, ul#css3menu1 li a.pressed {
    background-color: #7ACF27;
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.38), rgba(85, 170, 0, 0.7));
    border-color: #F8F8F8;
    border-style: solid;
    color: #333333;
    text-decoration: none;
}

ul#css3menu1 li.topmenu:hover > a, ul#css3menu1 li.topmenu a.pressed {
    background-color: #7DFA00;
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.77), rgba(85, 170, 0, 0.7));
    border-color: #F8F8F8;
    border-style: solid;
    color: #444444;
    text-decoration: none;
    text-shadow: 0 1px 0 #C5EAA1;
}



You should change gradient parameter. Please, edit the code this way:

ul#css3menu1 li:hover > a, ul#css3menu1 li a.pressed {
    background-color: #ff2124;
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.38), rgba(790, 0, 0, 0.7));
    border-color: #F8F8F8;
    border-style: solid;
    color: #333333;
    text-decoration: none;
}

ul#css3menu1 li.topmenu:hover > a, ul#css3menu1 li.topmenu a.pressed {
    background-color: #ff2124;
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.38), rgba(790, 0, 0, 0.7));
    border-color: #444444;
    border-style: solid;
    color: #444444;
    text-decoration: none;
    text-shadow: 0 1px 0 #444444;
}

Related