This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/final_drop.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ .menu { width:750px; font-size:0.9em; position:relative; z-index:100; } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; } .menu ul ul { width:150px; } /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu li { float:left; width:150px; position:relative; } /* style the links for the top level */ .menu a, .menu a:visited { display:block; font-size:13px; font-family: sans-serif; text-decoration:none; color:#f7d168; width:139px; height:30px; border:1px solid #0202f8; border-color:#def #678 #345 #cde; background:#010367; padding-left:10px; line-height:29px; } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited { width:150px; w\idth:139px; } /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited { background:#010367; } /* style the second level hover */ .menu ul ul a.drop:hover{ background:#010367; } .menu ul ul :hover > a.drop { background:#010367; } /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; height:0; top:31px; left:0; width:150px; } /* another hack for IE5.5 */ * html .menu ul ul { top:30px; t\op:31px; } /* style the table so that it takes no part in the layout - required for IE to work */ .menu table {position:absolute; top:0; left:0;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { background:#010367; color:#00ccff; height:auto; line-height:1em; padding:5px 10px; width:129px /* yet another hack for IE5.5 */ } * html .menu ul ul a{ width:150px; w\idth:129px; } /* style the top level hover */ .menu a:hover, .menu ul ul a:hover{ color:#f7d168; background:#010367; } .menu :hover > a, .menu ul ul :hover > a { color:#f7d168; background:#010367; } /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul{ visibility:visible; }