My HTML select menu is causing issues with Firefox and IE browsers. In Firefox, the options are treated as links, which interferes with my CSS hover effects. How can I resolve this?
Here is a simplified version of the select menu:
<Select name='country' onchange='this.form.submit()'>
<option selected value='1'>USA</option>
<option value='2'>UK</option>
</Select>
The CSS code is as follows:
#rightnavigation {
font: 12pt Arial,geneva,sans-serif;
}
#rightnavigation :link {color: green; font: 10pt Arial,geneva,sans-serif;}
#rightnavigation :visited {color: red; font: 10pt Arial,geneva,sans-serif;}
#rightnavigation :hover {color: orange; font: 10pt Arial,geneva,sans-serif;}
In Firefox, when hovering over the menu, all options resize to font size 10 and turn orange, whereas in IE they remain black.
I attempted using a class on each option, but it only worked for non-selected options.