选择在 Firefox 中被视为链接的菜单选项

Question

我有一个普通的 html 选择菜单。 Firefox 将选项视为链接，但 IE 不会。这意味着我在悬停时更改链接的 CSS 代码弄乱了 Firefox 中的选择菜单。我怎样才能阻止这种情况？

选择菜单简化为：

<Select name='country' onchange='this.form.submit()'>
<option selected value='1'>USA</option>
<option value='2'>UK</option>
</Select>

CSS 简化为：

#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;}

当我将鼠标移到菜单上时，所有选项都会调整为字体 10 并在 Firefox 中变为橙色，而不是像在 IE 中那样保持黑色。

我尝试创建一个类并将其应用于每个选项，但这仅适用于未选择的选项。

Answer 1

只需更改您的选择器以仅影响链接：

#rightnavigation a:link {color: green; font: 10pt Arial,geneva,sans-serif;}
#rightnavigation a:visited {color: red; font: 10pt Arial,geneva,sans-serif;}
#rightnavigation a:hover {color: orange; font: 10pt Arial,geneva,sans-serif;}