Please help creating CSS-based drop-down menus

[macaddict23]

I used this tutorial as my starting point: http://www.htmldog.com/articles/suckerfish/dropdowns/

Here's what I came up with: http://www.lifesfirstimpressions.com/test/dropdown.html

Issues:

In IE7, "FAQ" is being pushed to the far-right, so it is now hidden--it's probably tucked under "TECHNOLOGY." I took a screenshot of both menus, one from Firefox Mac and the other IE7. Despite specifying the font size and style, IE7 seems to be rendering the text bigger. I'm guessing that is the reason why FAQ is nowhere to be seen.

Thanks in advance for the help!

 

[Techguy172]

Try This, Not sure exactly what your menu structures are but this prevents it from loosing elements

#nav li:hover, #nav li.sfhover 		{ /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */									position: static; }

 

[macaddict23]

Thanks for the code, but it didn't help. The issue I'm having is not with the drop-down menus themselves, it's really IE Windows rendering the text slightly bigger, thus causing the link "FAQ" to be pushed out to the far-right somewhere. What's funny, is Safari Mac is doing the same thing. Firefox Mac works as it should.

 

[macaddict23]

If if spec two "font-size" styles, is there a way to force IE to use one style, and not the other?

 

[Techguy172]

You may have to create a separate Stylesheet for IE7. Then you can create styles only used by IE.

 

[torndownunit]

If you aren't a CSS expert, it's tough to find CSS only dropdown menus that will work in all browsers. There are a few at CSSPlay you might want to look at. http://www.cssplay.co.uk/menus/