i'm applying background color list items. in ie7, child list items not being rendered full width of parent ul item. instead, appears act inline elements (their width extends boundary of text makes content), though i've set child li elements display:block;
it presents correctly in browsers i've tested except ie7. i'm thinking might specific workaround browser, yes?
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title> new document </title> <style type="text/css"> .menu.top {height:30px; overflow:hidden; color:#f9f9f9; text-transform:uppercase; font-size:.85em;margin:101px 0 20px 0; padding-left:30px; border-radius: 15px; -moz-border-radius:15px;background:blue;} /*category flyout menus */ .menu.top.cat {overflow:visible; } .menu.top ul {margin:0; padding:0;white-space:nowrap;background:blue; position: relative; list-style: none; z-index: 50;} .menu.top ul ul li {display:block;width:100%;clear:both;float:none;background:#777;} .menu.top ul ul { position: absolute; visibility: hidden; list-style: none; z-index: 9999; } .menu.top ul ul li {display:block;width:100%} .menu.top ul {white-space:nowrap;color:#fff;line-height:30px; padding:0 10px; display: block; } .menu.top ul ul ul { position: absolute; top: 0; } .menu.top ul li:hover ul, .menu.top ul a:hover ul, .menu.top ul :hover ul :hover ul, .menu.top ul :hover ul :hover ul :hover ul { visibility: visible;} .menu.top ul :hover ul ul, .menu.top ul :hover ul :hover ul ul { visibility: hidden; } .menu.top ul a:hover {background:url(spot2.gif);background:url(bar-bg.png) repeat-x, url(spot2.gif) repeat;color:#333; text-decoration:none;} .menu.top ul.children li.current-cat {color:#333;} </style> </head> <body> <div class='menu top cat'> <ul class='catparent'> <li class="cat-item"><a href="#" >best camera's under $100</a> <ul class='children'> <li class="cat-item"><a href="#">blue cameras under $100</a></li> <li class="cat-item"><a href="#">red cameras</a></li> </ul> </li> <li class="cat-item"><a href="#">cameras review rating</a></li> <li class="cat-item"><a href="#">best camera's under $200</a> <ul class='children'> <li class="cat-item"><a href="#">best lightweight cameras under $200</a></li> <li class="cat-item"><a href="#">best black cameras under $200</a></li> </ul> </li> </ul> </div> </body> </html>
are still seeing this? here example came description. can modify example better show situation?
http://jsfiddle.net/zrzv2/1/
in example way is, see widths extending 100% of parent ul.
bob
Comments
Post a Comment