not sure how to fix this, please help!

[stroix]

I am sure that this is no surprise to many of you and hope that someone kind help me find a solution. I am having trouble displaying a drop down CSS menu in IE7, it seems to work fine in Firefox. Please advise and thank you for all your help with this. I have spent far too much time on this and still can't figure it out.

Website is located at: myasvn.org/_/campusrec/temp.php



/* Navigation Menu */

ul#menu {
background: rgb(63, 69, 76) url('../_media/bk-menu.png') repeat-x;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
width: 950px;
height: 34px;
display: block;
line-height: 34px;
z-index:2;
}

ul#menu li a {
display: block;
color: rgb(255, 255, 255);
text-decoration: none;
text-align: center;
}

ul#menu li a:hover, ul#menu li:hover {
background-color: rgb(53, 60, 66);
}

ul#menu li {
border-right: 1px solid rgb(53, 60, 66);
float: left;
}

ul#menu li ul {
position: absolute;
left: -999em;
background-color: rgb(238, 238, 238);
width: 165px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}

ul#menu li li {
border-right: medium none;
width: 157px;
float: left;
line-height: 30px;
}

ul#menu li li a {
border-bottom: 1px solid rgb(210, 210, 210);
width: 157px;
color: #000000;
text-decoration: none;
text-align: left;
padding-left: 8px;
display: block;
}

ul#menu li li a:hover {
color: rgb(255, 255, 255);
background-color: rgb(204, 0, 0);
}

ul#menu li:hover ul {
left: auto;
}

ul#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}

[tfit]

As far as I know IE only supports A tags to be links, so everything else won't work.

[stroix]

thanks for your reply. It's fixed now. =)

[LadynRed]

IE7 supports hover on other elements besides the <a>. IE6 does not.