HTML Drop-Down Menus - mixed fonts

mix serif and sans-serif font in same option line

[jjasu]

This is an unusual problem... but I have a drop down menu on a static html website, and need to use both sans serif font (arial) and serif font (time new roman) on the same menu option line. There are 2 characters on this menu option line that need to be times, the rest need to be arial - due to copyright requirements. So far it seems that I can only use one style class or font per line (either all arial or all times), is this the case? Needs to be at least IE 5.5 and firefox compliant.

[encyclo]

Welcome to WebmasterWorld [webmasterworld.com], jjasu.

Have you tried using a

span

around the text you need in the different font?

<option>Text in default font and <span class="opt-text">text in Times font</span></option>

And the CSS:

span.opt-text {
font-family:"Times New Roman", Times, serif;
}

[jjasu]

I did, and the browser (IE 6) seems to ignore it. The <select> tag has a class specified, and that is the only one that will display.

[Purple Martin]

The drop-down menu that the browser displays is a standard operating system control, not just rendered html. Therefore you are limited to what the control is capable of. You can set its width, colour, font, etc, but you can't change an option's style part-way through the line.

Theoretically you could build your own drop-down using JavaScript to show/hide a div with options, then you could style the links in the div any way you want. This would of course require a lot more work, and wouldn't be any good for users who have JavaScript turned off (you would need to provide alternative navigation for them). I recommend you stick with the standard <select> dropdown-menu and just live with the fact that you can't change style mid-line. Simple is good.