html - How to set background color width of dropdown menu items in IE7? -

i have following navigation bar: http://jsfiddle.net/jajq3/embedded/result/

for posterity, structure:

<div id="navbar">     <ul style="float: left; padding-left: 5px;">         <li>             <a href="#">a</a>         </li>         <li>             <a href="#">b</a>         </li>         <li>             <a href="#">c</a>             <ul>                 <li><a href="#">this thing.</a></li>                 <li><a href="#">cool man</a></li>                 <li><a href="#">linus</a></li>             </ul>         </li>         <li>             <a href="#">d</a>             <ul>                 <li><a href="#">gerg.</a></li>                 <li><a href="#">weeeeeeeeeeeeeeeeeeeeee</a></li>                 <li><a href="#">asdf idiot</a></li>                 <li><a href="#">blah</a></li>             </ul>         </li>     </ul> </div> 

as can see, when hover on dropdown menu link, background color behind link changes. in ie7, background not extend way edge of dropdown menu; goes edge of link's text. in modern browsers, not observed. how can working in ie7?

before answering, please note not want explicitly set width dropdown menu. currently, dropdown menu links dictate how wide dropdown menu be, , how want remain. (for example, dropdown menu d should wider c's because has long "weeeeeeeeee" link)

you should rid of styles set on #navbar > ul > li > ul > li , let list items list items. automatically wide containing ul.

then if set background-color on :hover on li instead of on a, background-color fills whole width of menu.

here's jsfiddle embedded result link work in ie7.

get rid of bit of css:

#navbar > ul > li > ul > li { width: 100%; clear: left; display: block; }

and split class @ bottom of css 2 parts:

#navbar > ul > li:hover > ul > li:hover {     background-color: #999; } #navbar > ul > li:hover > ul > li:hover > {     color: white; }