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.