用css制作的導(dǎo)航菜單_Div+CSS教程

以前發(fā)過(guò)一個(gè)演示，下拉及多級(jí)彈出式菜單僅供學(xué)習(xí)之用，實(shí)際應(yīng)用中還存在些問題，被會(huì)員kl521516發(fā)現(xiàn)當(dāng)下拉菜單下有內(nèi)容時(shí)會(huì)把內(nèi)容擠跑，小A改成了絕對(duì)定位的方式，雖然可以解決擠跑的問題，但在IE6下新的問題又出現(xiàn)了，就是下拉菜單下邊的選不中，本人對(duì)JS不太熟悉，今天又找了個(gè)沒問題的，上傳上面供大家分享。

本文來(lái)源與模板無(wú)憂_m.hl5o.cn

<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜單演示</title> <style type="text/css">  </style> <script type=text/javascript><![CDATA[//><!]]></script> </head> <body> <ul id="nav"> <li><a href="#">產(chǎn)品介紹</a>  <ul>  <li><a href="#">產(chǎn)品一</a></li>  <li><a href="#">產(chǎn)品一</a></li>  <li><a href="#">產(chǎn)品一</a></li>  <li><a href="#">產(chǎn)品一</a></li>  <li><a href="#">產(chǎn)品一</a></li>  <li><a href="#">產(chǎn)品一</a></li>  </ul> </li> <li><a href="#">服務(wù)介紹</a>  <ul>  <li><a href="#">服務(wù)二</a></li>  <li><a href="#">服務(wù)二</a></li>  <li><a href="#">服務(wù)二</a></li>  <li><a href="#">服務(wù)二服務(wù)二</a></li>  <li><a href="#">服務(wù)二服務(wù)二服務(wù)二</a></li>  <li><a href="#">服務(wù)二</a></li>  </ul> </li> <li><a href="#">成功案例</a>  <ul>  <li><a href="#">案例三</a></li>  <li><a href="#">案例</a></li>  <li><a href="#">案例三案例三</a></li>  <li><a href="#">案例三案例三案例三</a></li>  </ul> </li> <li><a href="#">關(guān)于我們</a>  <ul>  <li><a href="#">我們四</a></li>  <li><a href="#">我們四</a></li>  <li><a href="#">我們四</a></li>  <li><a href="#">我們四111</a></li>  </ul> </li> <li><a href="#">在線演示</a>  <ul>  <li><a href="#">演示</a></li>  <li><a href="#">演示</a></li>  <li><a href="#">演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示演示演示演示</a></li>  </ul> </li> <li><a href="#">聯(lián)系我們</a>  <ul>  <li><a href="#">聯(lián)系聯(lián)系聯(lián)系聯(lián)系聯(lián)系</a></li>  <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li>  <li><a href="#">聯(lián)系</a></li>  <li><a href="#">聯(lián)系聯(lián)系</a></li>  <li><a href="#">聯(lián)系聯(lián)系</a></li>  <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li>  <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li>  </ul> </li> </ul> <div style="clear:both;">看看這一行內(nèi)容會(huì)不會(huì)被擠跑－－m.hl5o.cn</div> </body> </html>

模板無(wú)憂_m.hl5o.cn