没什么可以说的,直接上例子
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;}
上效果图