I'm building a site that requires a dropdown menu. I'm using the suckerfish technique. All was going well until I test the final version in IE. The problem is I can't get a background color or image to appear on the main button when you rollover them. Any ideas? You can view the page here -

http://web.mac.com/jmetzger631/index2.php

Here is my CSS:

/* CSS Document */

#nav {
display:block;
clear:both;
margin: 0;
height:29px;
border-bottom: 5px solid #E9AE3D;
width: 955px;
background-image:url(/images/nav1_bg_f1.jpg);
line-height:29px;
padding:0px 0px 0px 0px;
border-top: 5px solid #FFF;
background-color:#003366;


}


#nav ul {
list-style: none;
padding: 0;
margin: 0;

}
/* controls width / height of top level links */

li {
float: left;
position: relative;
text-align: center;
cursor: default;
height:29px;
line-height:29px;
list-style:none;
margin:0;
}
/* controls looks of top level main links */


#nav a {
font-weight: bold;
color:#FFFFFF;
display:block;
border-right:1px solid #FFF;
text-transform:uppercase;
font-weight:bold;

}
#nav a {
text-decoration:none;

}
/* controls color and borders of top level main links rollovers*/

#nav a:hover {
text-decoration:none;
color:#333333;
background-image:url(/images/nav1_bg_f2.jpg);
background-color:#33CCCC;
display:block;

}
/* controls looks of 2nd level links */

#nav li li a {
display: block;
font-weight: normal;
color: #000;
text-align:left;
border-right:none;
padding-left:13px;
text-transform:none;

}
/* controls color and borders of 2nd level links rollovers*/

#nav li li a:hover {
background-color:#ECBA5B;
background-image:none;
color:#FFF;

}
/* controls color and borders of 2nd level links */

li li {
display: block;
float: none;
background-color:#E9AE3D;
margin:0;
width:250px;
border-bottom:1px solid #F0C678;
padding:0;


}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
margin:0;
padding:0;


}

li>ul {
top: auto;
left: auto;
}

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

#nav hr {
display: none;
}


/* controls spacing of divs/main level buttons - it is best to get widths from slicing a graphic of equally spaced buttons - adjust for the width of any borders on the #nav a*/


#nav1_link1 {
width:63px;
}
#nav1_link2 {
width:109px;
}
#nav1_link3 {
width:98px;
}
#nav1_link4 {
width:116px;
}
#nav1_link5 {
width:126px;
}
#nav1_link6 {
width:95px;
}
#nav1_link7 {
width:84px;
}
#nav1_link8 {
width:128px;
}
#nav1_link9 {
width:136px;
}
/* adjustment for the last right div - no border! */
nav1_link9 a {
border:none;
}
/* controls spacing of drop down menu widths for each rollover*/

#nav #nav1_link1li {
width:63px;
}
#nav #nav1_link2 li {
width:175px;
}
#nav #nav1_link3 li{
width:125px;
}
#nav #nav1_link4 li{
width:185px;
}
#nav #nav1_link5 li{
width:165px;
}
#nav #nav1_link6 li{
width:175px;
}
#nav #nav1_link7 li{
width:84px;
}
#nav #nav1_link8 li{
width:170px;
}
#nav #nav1_link9 li{
width:136px;
}
/** Navigation page markers */

body.nav1_main1 a.nav1_link1, body.nav1_main2 a.nav1_link2, body.nav1_main3 .nav1_link3, body.nav1_main4 a.nav1_link4, body.nav1_main5 a.nav1_link5, body.nav1_main6 a.nav1_link6, body.nav1_main7 a.nav1_link7, body.nav1_main8 a.nav1_link8, body.nav1_main9 a.nav1_link9 {
background-image:url(/images/nav1_bg_f2.jpg);
color: #333333;

}