IE7 Menu rendering help please

Please help me understand why my top navigation menu is rendering incorrectly in IE7:


http://test.davidasheim.com/test/gbc/newmenu.html

#menu LI A {
padding-left: 30px;
margin-right:1px;
font-weight:strong;
color: #000000;
text-decoration:none;
font-size:30px;
background: #8fa5a8 url("images/lefttab.jpg") left top no-repeat ;
}
#menu LI A span{
vertical-align:top;
padding-right: 30px;
background: url("images/righttab.jpg") right top no-repeat;
/*background-color: #8FA5A8;*/
}

#menu LI A span font{
font-size:15px;
}

#menu LI A:hover {
padding: 0px 0px 0px 30px;
font-weight:strong;
background: #E0F1F3 url("images/lefttab_high.jpg") left top no-repeat;
color: #ffffff;
text-decoration:none;
}

#menu LI A:hover span{
padding: 0 30px 0 0;
background: url("images/righttab_high.jpg") right top no-repeat;
color: #ffffff;
font-weight:strong;
}

#menu LI A:hover span font{
color: #ffffff;
font-size:15px;
width:100%;
font-weight:strong;
}

#menu UL LI UL {
position: absolute;
width:800px;
display: none;
z-index: 9999;
padding: 10px 0px 0px 0px;
margin: 0px 0 0 0;
}

#menu LI LI {
width: auto;
float: left;
margin: 0px 0px 0 0;
}

#menu LI UL LI A {
text-decoration: none;
background:none;
padding: 0px 10px 0px 10px;
font-size: 12px;
color: #919191;
}


#menu LI UL LI A:hover {
text-decoration: underline;
color: #919191;
background:none;
padding: 0px 10px 0px 10px;
font-size: 12px;
font-style: italic;
font-weight:bold;
}

#menu UL LI:hover UL, #menu UL LI A:hover UL, #menu LI.sfhover UL { display: block; }

#menu .sel, #menu .actual, #menu .sel:hover {
padding: 0px 0px 0px 30px;
font-weight:strong;
background: #E0F1F3 url("images/lefttab_high.jpg") left top no-repeat;
color: #000000;
}

#menu .sel span, #menu .actual span, #menu .sel:hover span{
padding: 0 30px 0 0;
background: url("images/righttab_high.jpg") right top no-repeat;
color: #000000;
font-weight:strong;
}

#menu .sel span font, #menu .actual span font, #menu .sel:hover span font{
color: #000000;
font-size:15px;
font-weight:strong;
padding:0 0 0 0;
}


#menu .neutral {
background: transparent !important;
color: #BC1C1C !important;
}
#menu .sub-audio { margin-left: -50px;}
#menu .sub-text-msg { margin-left: -123px; }
#menu .sub-phone-app{ margin-left: -200px; }
#menu .sub-mob-giving { margin-left: -380px; }
#menu .sub-media { margin-left: -400px; }
#menu .sub-about-us { margin-left: -200px; }

 

Being that it's a train wreck in Opera as well, (bold for hover states is a REALLY bad idea BTW, makes it jump to the point content is pushed off screen) I'd say it's possible you overthought your markup.

Oh yeah, manually positioning your hover states, that's got to be half your problem right there. After lunch I'll toss together an example of how to do that MUCH simpler. You've got a LOT of unnecessary code in there.