Question

Once again I have an IE problem. I have a dropdown menu with <LI> items falling under it vertically, and the <UL> above has a background colour. The <LI> has a hover background colour so I definitely need it to fill the full width, but only on IE it does not work.

The sample I’m working on is here. Put your mouse over the “RESOURCES” menu item. It works well on FF but not on IE (duh).

#menu {
    margin:0px auto;
    padding:0px;
    width: auto;
    display: block;
    list-style:none;
    white-space: nowrap;
    position: relative;
}

#menu li {
    display:inline;
    margin-left:40px;
    margin-right:0px;
    margin-top:10px;
    margin-bottom:0px;
    padding:0px 0px 0px 0px;
    list-style:none;
    position: relative !important;

}

#menu li a:link, #menu li a:visited {
    color:#fff;
    text-decoration:none;
    font-size:12px;
    padding-bottom: 3px;
    text-transform: uppercase;
}

#menu li a:hover {
    color:#ddd;
}

#menu li a:active {
    position:relative;
    top:1px;
    color:#fff;
}

.submenu {
    position:absolute;
    left: -9999px;
    display: block;
    background-color:#906117;
    padding:0px 0px 0px 0px;
    margin: 0px;
    top:15px;
    z-index: 20;
}

#menu li:hover .submenu {
    left: -5px;
}

.submenu li {
    text-align: left !important;
    margin:0px !important;
    padding: 3px 0px 5px 0px !important;
    float: left;
    display: block;
    width: 100%;
    position:relative;
    border: 1px solid #333;
}

.submenu li:hover {
    background-color: #f79c10;
}

.submenu li a:link, .submenu li a:visited {
    color:#fff !important;
    font-size:12px !important;
    padding: 0px !important;
    margin: 0px !important;
    white-space:nowrap;
    display: block;
    padding:3px 7px 5px 7px !important;
    min-width: auto;
    zoom: normal;

}

.submenu li a:hover, .submenu li a:active {
    color:#fff !important;
}

Answer 1

CSS:

#menu .submenu li {
    display: block;
    width: auto;
    float: none;
}