用css制作的導航菜單_Div+CSS教程

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

本文來源與模板無憂_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)容會不會被擠跑－－hl5o.cn</div> </body> </html>

模板無憂_hl5o.cn