How do I code navigation drop-down to display properly in IE?

Can anyone help me code this properly? My biggest problem is the mainnav drop-down in IE. I've checked Safari and FF for Mac and PC. It's just this IE positioning giving me a problem. I'd prefer not to hack it, but anything to get it working at this point would be nice. The subnav is also displaying different than intended, but it's not a major problem. Also, the fonts are so much bigger in IE, I'm using ems, should I be using something else to get a more accurate font display?

Template here:

Thank you!
LVL 12
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hi there,

It looks like you've got some poorly formed HTML here - the first UL tag (for the menu dropdown content) is not terminated!  I strongly recommend proper indentation of your HTML, which will make it easy for you to see where the unordered lists are going wrong.  Firefox and safari are famous for actually rendering invalid HTML while IE is a bit more strict.

Before I looked at your page I was assuming this was the typical positioning issues and you should be aware that select elements will NOT interact well with your menu system, below is my response for that issue which you will encounter if you use selects:

Well if you don't want to hack it I'd like to suggest either using a third party GUII library such as Flex.  Alternatively, you could design your own control which is something I've been wanting to do for years.  If you want to avoid this kind of solution, here are the "hacks" I find most dependable:

1.  The easiest (though maybe not practical) way to avoid positioning issues with SELECT elements in IE would be to simply make sure that select elements won't appear in areas where your menu will collide.

2.  Float your menu system drop down in an iFrame.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tony van SchaikFront-end Web developerCommented:
I create my menus always with Unordered lists on this website you can find a lot of CSS dropdown menus that works in every browser:
I'm using this in a menu in a Wordpress theme: it's a CSS framework with multiple menu themes. Works great
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.