网页导航

2010-10-28 杜世伟

<!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" />
<style type="text/css">
/*导航样式开始*/
#navigation {
width:784px;
padding:8px;
margin:8px auto;
background:#3B5998;
height:18px;
}
#navigation ul li {
float:left;
margin-right:14px;
position: relative ;
z-index:100;
}
#navigation ul li a {
display:block;
padding:0 8px;
background:#EEEEEE;
font-weight:700;
}
#navigation ul li a:hover {
background:none;
color:#fff;
}
#navigation ul li ul{
background-color: #88C366;
position: absolute;
width: 80px;
overflow:hidden;
display:none;
}
#navigation ul li:hover ul{
background-color: #88C366;
position: absolute;
width: 100px;
display:block;
}
#navigation ul li ul li{
border-bottom: 1px solid #BBB;
text-align: left;
width: 100%;
}
/*导航样式结束*/

#navigation {
background:#AFD400;
}

</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function(){
     $("#navigation ul li:has(ul)").hover(function(){
              $(this).children("ul").stop(true,true).slideDown(400);
              },function(){
               $(this).children("ul").stop(true,true).slideUp("fast");
              });
     })
</script>
<title>无标题文档</title>
</head>