没什么可以说的，直接上例子
html+jquery代码
<!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=utf-8" /> <title>企业网站下拉式导航栏示例</title> <link rel="stylesheet" type="text/css" href="style/comm.css"/> <link rel="stylesheet" type="text/css" href="style/layout.css"/> <script type="text/javascript" src="script/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#nav>ul>li").hover(function(){ $(this).children("ul").show(); },function(){ $(this).children("ul").hide(); }); }); </script> </head> <body> <div id="wrap"> <div id="nav"> <ul> <li><a href="#">网站首页</a> <ul> <li><a href="#" alt="访问公司博客">公司博客</a></li> <li><a href="#">公司论坛</a></li> </ul> </li> <li><a href="#">关于我们</a> <ul> <li><a href="#">公司新闻</a></li> <li><a href="#">我们的宗旨</a></li> <li><a href="#" >服务内容</a></li> </ul> </li> <li><a href="#">网站新闻</a> <ul> <li><a href="#">行业动态</a></li> <li><a href="#">公司新闻</a></li> </ul> </li> <li><a href="#">作品展示</a> <ul> <li><a href="#">网站作品</a></li> <li><a href="#">flash作品</a></li> <li><a href="#">AI作品</a></li> <li><a href="#">插画设计</a></li> </ul> </li> <li><a href="#">项目报价</a> <ul> <li><a href="#">网站作品报价</a></li> <li><a href="#">flash作品报价</a></li> <li><a href="#">AI作品报价</a></li> <li><a href="#">插画设计报价</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> </ul> </div> </div> </body> </html>
CSS代码
comm.css(重置一些常规样式)
@charset "utf-8"; /* CSS Document */ /* 用户重置常规样式 */ *{margin:0; padding:0} body{ font-size:62.5%; } a{ text-decoration:none;} ul,ol{ list-style-type:none;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;}
layout.css(用于布局)
@charset "utf-8"; /* CSS Document */ #wrap{ width:1000px; margin:0 auto; } #nav{ font-family:"微软雅黑"; font-size:1.5em; height:30px; background:rgb(195,218,249); } #nav ul{width:100%;background:rgb(195,218,249);} #nav ul li{float:left; position:relative;} #nav ul li a{display:block;width:120px;height:30px;line-height:30px; text-align:center; background:rgb(195,218,249);color:#000;} #nav ul li a:hover{background:rgb(255,229,179);color:#000;} #nav ul li ul{ position:absolute;top:30px;left:0px; display:none;border:1px solid #ccc;margin-bottom:-3px;width:120px;} #nav ul li ul li{float:none; border-bottom:1px solid #ccc;} #nav ul li ul li a{background:rgb(246,246,246);color:#000;display:block;} #nav ul li ul li a:hover{background:rgb(255,229,179);color:#000;}
上效果图
