Thanks to the legend that is Stomme_poes, I have a very VERY nicely structured menu for what I need. There's 1 slight glitch. The sub menus are 6px in from the left of the main menu in IE. They're aligned nicely in FF. Any ideas how to make them both aligned like it is in FF? Thanks, Leo The code is here and the link is: http://stommepoes.jobva.nl/Menus/fakejon.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jon's Menu For Leo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="Keywords" content="" /> <meta name="generator" content="gEdit" /> <style rel="stylesheet" type="text/css"> body { background-color: #c7c7c7; } ul { padding: 0; margin: 0; list-style-type: none; } li { width: 148px; height: 32px; float: left; margin-left: 5px; background-color: #333; position: relative; border: 1px solid #000; } li a { display: block; font: normal 16px/18px serif; color: #fff; text-decoration:none; width:148px; height: 1.7em; text-align: center; padding: 5px 0 0 0; white-space: nowrap; } li a:hover { font: bold 16px/18px serif; color: #fff; background-color: #fb4973; } /*SUBS!!!*/ li ul { visibility: hidden; position: absolute; margin: 0; padding: 0; height: 1.5em; top: 32px; left: -6px; width: 120px; } li ul li { width: 120px; height: auto; border: 1px solid #000; } li ul li a { font: normal 10px/14px serif; padding-left: 2px; padding-bottom: 4px; text-align: left; width: 118px; height: 1.1em; } table { position: absolute; top: 0; left: 0; border-collapse: collapse; } li ul li a:hover { font: normal 10px/14px serif; border: none; } ul li:hover ul, ul a:hover ul { visibility: visible; } </style> </head> <body> <ul> <li><a href="whatever">What</a></li> <li><a href="whereever">What's New?<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="whatever">Changelog</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="whatever">Showcase<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="wh">Full Gallery</a></li> <li><a href="wh">Gallery Set</a></li> <li><a href="wh">Timed Gallery</a></li> <li><a href="wh">Timed Slideshow</a></li> <li><a href="wh">Showcase Slideshow</a></li> <li><a href="wh">Timed Image Switcher</a></li> <li><a href="wh">Sliding Transition</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="whatever">Download</a></li> <li><a href="whatever">Getting Started<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="wh">Installing a Gellery Set</a></li> <li><a href="wh">FAQ</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="whatever">Forums</a></li> </ul> </body> </html> Code (markup):
Thanks Crimsonc but something like 46% of users still use IE6 so I need a fix for it... thanks for the input tho