Problems with my CSS Drop Downs In IE

Hey Everyone,

I am almost ready to cry this is so frustrating!

I have created CSS drop down's on a couple of sites. However, it works fine on all websites I use except for one! I cannot get it to work correctly.

You can see my functional drop downs in IE here:

http://www.designingdigitally.com


now you can see my functional yet messed up drop down here:
http://www.ohioascd.com

I am using the exact same drop down CSS code on bot sites. But as you can see the www.ohioascd.com site does not line up correctly. The boxes are behind and right on top of the buttons.

Here is my coding:


#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
overflow: visible;
}

#cssdropdown li {
float: left;
position: relative;
overflow: visible;
}

.mainitems{
border: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

.mainitems a{
margin-left: 0px;
margin-right: 0px;
text-decoration: none;
}

.subuls{
display: none;
width: 12em;
position: absolute;
top: 1.2em;
left:-0.8em;
background-color: #333333;
border: 1px solid black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
z-index: 0;
}

.subuls li{
width: 100%;
}

.subuls li a{
text-decoration: underline;
}

.subuls li a:hover{
color: #FF9B37
}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}


Does anyone know why this is happening? HELP please?!

I think we've all been at the 'ready to cry it's so frustrating' stage at some point.

I'm no genius when it comes to reading CSS however i can offer one suggestion that will solve the problem: conditional comments

Your site displays fine in Firefox. So you can use condional comments that only apply to people using IE. Do an internet search and you should get loads of info.

You wanna put something like if people using ie then the drop downs appear slightly lower.

__________________
http://www.topwebdesigner.co.uk | http://www.backfromthedepths.co.uk

There is actually a good mini tutorial in this month new newsletter but its currently broken. If you can wait a bit it should be fixed soon

__________________
http://www.topwebdesigner.co.uk | http://www.backfromthedepths.co.uk

I had someone tell me it's because my css is not validated as correct. So I made sure everything was good to go on both my XHTML and my CSS.

Here is the link:

http://www.ohioascd.com/index_test.php

Does anyone have a good css drop down menu that will work with what I am trying to do? Everything is messed up in IE, and I need to get this fixed asap! Any resources?

Please let me know if and when the newsletter goes back up! I need all the help I can get on this!

There's a million types of menu on http://www.cssplay.co.uk/ if you want to start the menu from scratch.

you can also learn about conditional comments here http://www.quirksmode.org/css/condcom.html

__________________
http://www.topwebdesigner.co.uk | http://www.backfromthedepths.co.uk

I've always recommended Son Of Suckerfish dropdowns, from HTML Dog.

I use them all the time. Very easy to implement. Completely valid HTML. And only a touch of javascript for IE6 (and I mean a touch - 12 lines).