Change css menu template 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

Recent Demos



Contact US

For troubleshooting, feature requests, and general help, contact Customer Support at Mail. Make sure to include details on your browser, operating system, CSS3 Menu version, link to your page.
In most cases you'll get a reply within 1 business day. Please read the FAQs first to see if your question has already been answered.

See More