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><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><title>Js + div + css drop-down menu code</title><style type="text/css">. Menu {font-family: arial, sans-serif; width: 750px; position: relative; z-index: 3000; font-size: 9pt; margin: 0 auto ;}. menu ul li ,. menu ul li a: visited {padding: 0; margin: 0; display: block; text-decoration: none; width: Pixel; height: 36px; text-align: center; color: # fff; line-height: 36px; font-size: 9pt; overflow: hidden ;}. menu ul {padding: 0; margin: 0; list-style-type: none ;}. menu ul li {padding: 0; padding-top: 7px; margin: 0; float: left; position: relative; background: # 0066CC url (yun_qi_img/icon.gif) no-repeat left 19px; height: 35px ;}. menu ul li ul {display: none; margin-left:-30px ;}. menu ul li a {width: 160px; height: 24px; line-height: 24px; overflow: hidden ;}. menu ul li {padding: 0; height: 24px;}/* specific to non IE browsers */. menu ul li: hover a {padding: 0; margin: 0; color: # fff; height: 24px ;}. menu ul li: hover ul {display: block; position: absolute; top: 42px; left: 0; width: 160px ;}. menu ul li: hover ul li. hide {padding: 0; margin: 0; background: # 13528a; color: # fff ;}. menu ul li: hover. hide {padding: 0; margin: 0; color: # fff ;}. menu ul li: hover. hide: hover {padding: 0; margin: 0; color: #000 ;}. menu ul li: hover ul li ul {display: none; margin-left: 0; border-top: 1px solid #80 abde ;}. menu ul li: hover ul li a {padding: 0; margin: 0; width: 160px; height: 24px; line-height: 24px; display: block; background: # limit F71; color: # fff; border: 1px solid # fff ;}. menu ul li: hover ul li a: hover {padding: 0; margin: 0; background: # fff; color: #000; border: 1px solid #80 abde ;}. menu ul li: hover ul {padding: 0; margin: 0; display: block; position: absolute; left: 162px; top: 0 ;}. menu ul li: hover ul. left {left:-162px ;}. menu ul li: hover ul li ul {display: none ;}. menu ul li: hover ul {display: block ;}</style><!--[if lte IE 6]><style type="text/css">.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}.menu ul li a:hover ul li a.hide {display:none;}.menu ul li a:hover {color:#fff; background:none;}.menu ul li a:hover ul {display:block; position:absolute; top:43px; left:0; width:160px;}.menu ul li a:hover ul li a.sub {background:#13528a; color:#fff;}.menu ul li a:hover ul li a {display:block; background:#213f71; width: 160px;height:24px;line-height:24px; color:#fff; border:1px solid #fff;border-top:none;}.menu ul li a:hover ul li a ul {visibility:hidden;margin-left:0;border-top:1px solid #80abde;}.menu ul li a:hover ul li a:hover {background:#fff; color:#000; border:1px solid #80abde;border-top:none;}.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:162px; top:0; color:#000;}.menu ul li a:hover ul li a:hover ul.left {left:-162px;}.menu ul li a:hover ul li a:hover ul li ul {visibility:hidden }.menu ul li a:hover ul li a:hover ul li a.sub2 {background:#13528a; color:#fff;}.menu ul li a:hover ul li a:hover ul li a:hover {}.menu ul li a:hover ul li a:hover ul li a:hover ul {visibility:visible;}.menu ul li a:hover ul li a:hover ul li a:hover ul li a:hover {}</style><![endif]--></head><body><div class="menu"> <ul> <li>Homepage<!--[if lte IE 6]> 首页 <table><tr><td> <![endif]--> <!--[if lte IE 6]> </td></tr></table> <![endif]--> </li> <li>News Center<!--[if lte IE 6]> 新闻中心 <table border="0" cellspacing="0" cellpadding="0"><tr><td> <![endif]--> <ul> <li>Company News</li> <li>Media comment</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>About Shixiang<!--[if lte IE 6]>关于世翔<table border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]--><ul><li>Company Profile</li><li>Shixiang Road</li><li>Chairman</li><li>Board of Directors</li><li>Management team</li><li>Organization</li><li>Contact us</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>Products and Services<!--[if lte IE 6]>产品与服务<table border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]--><ul><li>Game Products><!--[if lte IE 6]><a class="sub" href="#" title="游戏产品">游戏产品 ><table border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]--><ul><li>Chinese startup</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>Basic Products><!--[if lte IE 6]><a class="sub" href="#" title="基础产品">基础产品 ><table border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]--><ul><li>Website construction><!--[if lte IE 6]> <a class="sub2" href="#" title="网站建设">网站建设 > <table><tr><td> <![endif]--><ul><li>Success Stories</li><li>Website creation process</li><li>Package service</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>Enterprise Promotion><!--[if lte IE 6]> <a class="sub2" href="#" title="企业推广">企业推广> <table><tr><td> <![endif]--><ul><li>Baidu yearly subscription</li><li>Bidding ranking</li><li>SEO search engine</li><li>Google optimization</li><li>Website diagnosis</li><li>Optimization process</li> <li>SEO success stories</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>China WEB first stop</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>Electronic products><!--[if lte IE 6]><a class="sub" href="#" title="电子产品">电子产品 ><table border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]--><ul><li>Zhangzhongbao</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>Career development<!--[if lte IE 6]>职业发展<table><tr><td><![endif]--><ul><li>We are looking for talents</li><li>Career planning</li><li>Enterprise Vision</li><li>Compensation and benefits</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>Customer Service Center<!--[if lte IE 6]>客服中心<table><tr><td><![endif]--><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul></div></body></html>
Tip: you can modify some code before running
