Hi All, I am helping out a friend with his site and we're almost there. The only issue the client is having is that in IE6, the dropdown menu is pushed too far over to the right by about 50 px or so and the first 30 px of the list item are cut off. You can see one of the pages here:
http://www.legendinc.com/Pages/LegendAdvertising/LGNDPages/CourierStuff/DBK/DennisKBurke/public_html/Pages/AboutUs.html The client also sent a screenshot and it shows the list shifted too far over to the right so that the dropdown list is under the wrong link (for example the Fuel and Gasoline dropdown is positioned under Lubricants and the first 5 characters are cut off) The nav is wrapped in an outer div which is relatively positioned and the div containing the navigation is absolutely positioned. Here's the css for the nav: (the css is in a file called testnav.css). When I first developed the menu, the dropdowns were positioning too far to the right, so that's why there is a negative margin on the #nav ul li a declaration. It looks fine in FF and Safari, so if there's an IE6 hack out there, that would be a big help. #homenav { position:relative; top:0px; width:980px; margin:0px auto; margin-top:-25px; margin-bottom:15px; } #innernav { position:relative; top:0px; width:980px; margin:0px auto; margin-top:-25px; margin-bottom:25px; } #navigation{ position:absolute; top:0px; left:45px; margin:0px; width:980px; font: 12px Arial, Helvetica, sans-serif; padding-top:15px; padding-bottom:15px; } #navigation li a{ background-color: rgb(51,71,122); padding-left:5px; padding-right:7px; color:#FFF; font-size:12px; } #navigation li a.innerStyle:hover{ background-color: rgb(211,17,67); color:#FFF; } /*subnav styling*/ *+ html #nav ul { margin: 25px 0 0 -122px;} /* ie 7 hack */ #nav li { list-style:none; display:block; float:left; } #nav a { display:block; float:left; padding: 7px 10px 8px 10px; background-color:#fff; margin: 0 0 0 0px; text-decoration:none; } /* hide the sub nav */ #nav ul { display:none; position:absolute; margin: 30px 0 0 2px; z-index:999; } #nav li ul { width:160px; background-color:#FFF; } #nav ul li a { margin:0px 0px 0px -40px; width:190px; border:1px solid #000; float:left; } #nav ul li a.innerStyle:hover { background-color: rgb(211,17,67); color:#FFF; } I'd like to use this "recipe" to create dropdown nav on other sites, so any help with IE's little positioning issue would be greatly appreciated. Thanks! Jenn Mears-Nickerson Jenn Mears Web Design LLC <http://jennmearswebdesign.com/> ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
