CODEWITHSUNDEEP
htmlcssinternet-explorer-7
jeffkee
jeffkee

Reputation: 5238

<LI> under <UL> width not 100% on IE7

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;
}

Upvotes: 1

Views: 6207

Answers (3)

akai
akai

Reputation: 529

CSS:

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

Upvotes: 3

vmex151
vmex151

Reputation: 180

Display inline does not usually expand to the full width. Try setting it to 

display:inline-block

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Use float:left for your LI and move all the other styling to your A tag. Add display:block to your A tag.

Remember to clear your floats after your menu.

Upvotes: 2

Related Questions