Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Black-blue CSS drop-down menu</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <style> .menu {float:left;font-family: arial,verdana,sans-serif;width:100%;position:relative;font-size:11px;font-weight:bold; background:url(../img/bgoff1.gif) repeat-x;border-bottom:3px solid #FF0066;} .menu ul {padding:0;margin:0;list-style-type:none;float:left;position:relative;} .menu ul li {float:left;position:relative;display:inline;background:url(../img/bgdir.gif) no-repeat bottom right;} .menu ul li a, .menu ul li a:visited {float:left;display:block;text-decoration:none;color:#fff;width:auto;height:26px;padding:0px 16px 0px 16px;line-height:26px;} * html .menu ul li a, .menu ul li a:visited {width:auto;width:auto;} .menu ul li ul {display:none;} .menu ul li ul li{background:none;} table {margin:-1px;border-collapse:collapse;font-size:11px;} .menu ul li:hover a {color:#fff;background-color:#131546;} .menu ul li:hover ul {display:block;position:absolute;top:25px;margin-top:1px;left:0;width:100%;} .menu ul li:hover ul li a {display:block;background:#131546;color:#fff;height:auto;line-height:15px;padding:2px 16px 2px 16px;width:120px;border-bottom:1px solid #fff;} .menu ul li:hover ul li a:hover {background:#22256D;color:#fff;} </style> <!--[if lte IE 6]> .menu ul li a:hover {color:#fff;background-color:#131546;} .menu ul li a:hover ul {display:block;position:absolute;top:25px;left:0;background:#fff;margin-top:0;margin-top:1px;} .menu ul li a:hover ul li a {display:block;background:#131546;color:#fff;height:auto;line-height:15px;padding:2px 16px 2px 16px;width:130px;width:120px;border-bottom:1px solid #fff;} .menu ul li a:hover ul li a:hover {background:#22256D;color:#fff;} <![endif]--> </head> <body> <div class="menucontainer"> <div class="menu"> <ul> <li>Home</li> <li>About us</li> <li><a class="drop" href="#" target="_self">Services<!--[if IE 7]><!--> <!--<![endif]--> <table><tr><td> <ul><li>Design</li><li>Strategy</li><li>Analysis</li></ul></td></tr></table> <!--[if lte IE 6]> <![endif]--> </li> <li>Support</li> <li>Forums</li> <li>Contact Us</li> </ul> </div> </div> <!-- END Menu --> </body> </html></td> </tr></table>
Tip: you can modify some code before running
