CSS roll over menu

[boost]

Greets.
I want to somehow alter the coding in index template to make my forum's menu not images, but rollovers so that when it is rolled over, the text gets darker.
Does anyone know how to do this?

// Show the menu up top.  Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   // Show the [home] and [help] buttons.
   

echo '
            <a href="', $scripturl, '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/home.gif" alt="' . $txt[103] . '" style="margin: 2px 0;" border="0" />' : $txt[103]), '</a>', $context['menu_separator'], '
            <a href="', $scripturl, '?action=help" target="_blank">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/help.gif" alt="' . $txt[119] . '" style="margin: 2px 0;" border="0" />' : $txt[119]), '</a>', $context['menu_separator'];

Here's code for the first two buttons.

[zosont]

Looks like your theme has a setting 'use_image_buttons', first thing would be to turn this off. The next thing would be to look at the markup being generated (view source in a browser). You need to find a some css id or even class elements around the menu that would allow the menu links to be targeted.  Feel free to copy and paste some of the markup from around the menu here if you like. Then it is probably as easy as:

Code Select Expand


#MainMenuID a:hover {
    color: #000;/*a darker color*/
}