提示:您可以先修改部分代碼再運行
<!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 下拉式功能表代碼 </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 a, .menu ul li a:visited {padding:0; margin:0;display:block; text-decoration:none; width:104px; 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 li a {width:160px;height:24px; line-height:24px; overflow: hidden; }.menu ul li 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 a.hide {padding:0; margin:0;background:#13528a; color:#fff;}.menu ul li:hover ul li:hover a.hide {padding:0; margin:0; color:#fff;}.menu ul li:hover ul li:hover a.hide:hover {padding:0; margin:0; color:#000;}.menu ul li:hover ul li ul {display: none;margin-left:0;border-top:1px solid #80abde;}.menu ul li:hover ul li a { padding:0; margin:0;width: 160px;height:24px;line-height:24px; display:block;background:#213f71; 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 #80abde;}.menu ul li:hover ul li:hover ul {padding:0; margin:0;display:block; position:absolute; left:162px; top:0;}.menu ul li:hover ul li:hover ul.left {left:-162px;}.menu ul li:hover ul li:hover ul li ul { display:none;}.menu ul li:hover ul li:hover 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>首頁 <!--[if lte IE 6]> 首頁 <table><tr><td> <![endif]--> <!--[if lte IE 6]> </td></tr></table> <![endif]--> </li> <li>新聞中心 <!--[if lte IE 6]> 新聞中心 <table border="0" cellspacing="0" cellpadding="0"><tr><td> <![endif]--> <ul> <li>公司新聞</li> <li>媒體評論</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>關於世翔<!--[if lte IE 6]>關於世翔<table border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]--><ul><li>公司簡介</li><li>世翔之路</li><li>董事長</li><li>董事會</li><li>管理團隊</li><li>組織機構</li><li>聯絡我們</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>產品與服務<!--[if lte IE 6]>產品與服務<table border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]--><ul><li>遊戲產品 ><!--[if lte IE 6]><a class="sub" href="#" title="遊戲產品">遊戲產品 ><table border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]--><ul><li>中華小當家</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>基礎產品 ><!--[if lte IE 6]><a class="sub" href="#" title="基礎產品">基礎產品 ><table border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]--><ul><li>網站建設 > <!--[if lte IE 6]> <a class="sub2" href="#" title="網站建設">網站建設 > <table><tr><td> <![endif]--><ul><li>成功案例</li><li>建站流程</li><li>套餐服務</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>企業推廣> <!--[if lte IE 6]> <a class="sub2" href="#" title="企業推廣">企業推廣> <table><tr><td> <![endif]--><ul><li>百度包年</li><li>競價排名</li><li>SEO搜尋引擎</li><li>google最佳化</li><li>網站診斷</li><li>最佳化流程</li> <li>SEO成功案例</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>中國WEB第一站</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>電子產品 ><!--[if lte IE 6]><a class="sub" href="#" title="電子產品">電子產品 ><table border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]--><ul><li>掌中寶</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>職業發展<!--[if lte IE 6]>職業發展<table><tr><td><![endif]--><ul><li>誠聘英才</li><li>生涯規劃</li><li>企業願景</li><li>薪酬福利</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>客服中心<!--[if lte IE 6]>客服中心<table><tr><td><![endif]--><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul></div></body></html>
提示:您可以先修改部分代碼再運行