Hi Erick,
To reduce the height of the menu, simply reduce the amount of top and
bottom padding on the anchor elements.
Your text colour problem is a little more complicated to do
cross-browser as the CSS cascade makes things tricky. The declaration
you need to override is this one:
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6
applies text colour*/
color: #FFF;
}
so the first idea would be to add to the selectors for the rule you
use to describe the hover styles, like this:
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu li:hover a, sf-menu li.sfHover a, /* <--- ADDED THESE*/
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #FFF;
outline: 0;
color: #D1001A;
}
This will override the link's colour, but will probably also affect
links in the nested submenu. This could be avoided by using the >
operator in our new selector, but that wouldn't fix the issue for IE6
unfortunately. So the next thing to do might be to reset the colour
for deeper nested links like so:
.sf-menu li:hover li a, sf-menu li.sfHover li a { /* <--- ADDED AN
EXTRA LI */
color: #FFF;
}
Again, we may run into another problem because this new rule might
override the hover styles set above, so the final solution could add
an ID selector to each of the link pseudo styles in order to make sure
they always get priority. Here is the final proposed solution:
/* FINAL CODE: */
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu li:hover a, sf-menu li.sfHover a, /* <--- ADDED THESE*/
#someID .sf-menu a:focus, #someID .sf-menu a:hover, #someID .sf-menu
a:active { /* <--- ADDED IDs */
background: #FFF;
outline: 0;
color: #D1001A;
}
.sf-menu li:hover li a, sf-menu li.sfHover li a { /* <--- ADDED AN
EXTRA LI */
color: #FFF;
}
It's hard to be certain what the answer is without being able to test
the ideas on your menu so I may have overlooked things, but hopefully
this gives you some ideas.
Joel Birch.
