Menus won't work in IE 7

[andrewsmd]

I made some dropdown menus that work fine in firefox and IE 8 but not ie 7. Here is my code

<ul id="nav" class="list">
<li class="drop"><a href="http://www.example.com/tips">Tips &amp; Advice</a>
<ul class="position">
<li class="drop"><a href="http://www.example.com/Tips/Personal_Name.aspx" class="styleTop">
'Personal Name' Biography</a></li>
<li class="drop"><a href="http://www.example.com/Tips/SpecialTopic%20.aspx" class="styleMiddle">
Special Topic</a></li>
</ul></li></ul>

Here is my CSS
ul.list {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;

}

ul li.drop {
position: relative;
list-style-type: none;
width: 180px;

}

li ul.position {
position: absolute;
top: 12px;
left: -24px;
display: none;
list-style-type: none;

}

/* Styles for Menu Items */
ul li a.styleTop {
display: block;
text-decoration: none;
color: #FFFFFF !important;
background-color: #666666;
padding: 5px;
border: solid 1px black;
border-bottom: 0;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;

}
ul li a.styleTop:hover {
color: #4D6070 !important;
background-color: #DBDEE7;
text-align: left;
}
ul li a.styleMiddle {
display: block;
text-decoration: none;
color: #FFFFFF !important;
background-color: #666666;
padding: 5px;
border: solid 1px black;
border-bottom: 0;
border-top: 0;
list-style-type: none;
text-align: left;
}
ul li a.styleMiddle:hover {
color: #4D6070 !important;
background-color: #DBDEE7;
text-align: left;
}
ul li a.styleBottom {
display: block;
text-decoration: none;
color: #FFFFFF !important;
background-color: #666666;
padding: 5px;
border: solid 1px black;
border-top: 0;
list-style-type: none;
text-align: left;
}
ul li a.styleBottom:hover {
color: #4D6070 !important;
background-color: #DBDEE7;
text-align: left;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; }

li ul li a { padding: 2px 5px; }

li:hover ul, li.over ul { display: block; }

To be frank, I am at a loss as to why these are not working in IE 7. Does anyone know what I can do to fix this issue? Thanks,

[edited by: tedster at 1:13 am (utc) on Dec. 31, 2009]
[edit reason] switch to example.com - it can never be owned [/edit]

[limbo]

Hi Andrew. Is the CSS and HTML valid? Good place to start, especially with IE7 bugs.

[andrewsmd]

Do you mean running it through the w3 schools validator?

[limbo]

Indeed.

This [validator.w3.org...] and this [jigsaw.w3.org...]

Any errors?

[andrewsmd]

We are doing a complete redesign of these menus. Some idiot created this in dreamweaver and has file includes on top of templates and it links the same stylesheet 4 different times in one page, not to mention other poor design flaws. If anyone is curious, that html/css will work if you have a proper web page. Thanks for the suggestion, that's how I came to my conclusion.

[brightyoursite]

don't know why your code can't work .but here is my menu
/*snip*/
its even work in the ie6 chrome .i think this is not w3c valid problem. maybe your other part of css caused the problem . just comparison with my codes .maybe that can help u

[edited by: limbo at 8:22 pm (utc) on Jan. 10, 2010]
[edit reason] No personal links please. Read the TOS. Thank you. [/edit]

[andrewsmd]

Can you send that to me in an email here. They won't let you post links.

[Drag_Racer]

andrewsmd, try this out for some ideas. In fact the whole site is a good read for everyone once in a while to catch up/refresh on buggy stuff.

[positioniseverything.net...]

(I have no affiliation with the site in any way)