jQuery简单特效之 ----- jQuery实现简单的下拉菜单

来源：互联网发布：互动投影软件1.1 编辑：程序博客网时间：2024/04/30 12:30

HTML文件 (包含js代码)

<!DOCTYPE html> <html> <head>

<title>  </title><link rel="stylesheet" type="text/css" href="test_13.css"><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready( function(){$('#navigation li').hover( function(){$(this).find('.subnav').animate({opacity:1.0,height:'toggle'} , 500);},function(){$(this).find('.subnav').animate({opacity:0,height:'toggle'},500 );$(this).find('a').removeClass('active');});});</script>

</head> <body>

<div id="header"><ul id="navigation"><li> <a href="#"> HOME </a> </li><li> <a href="#"> Our work </a>   <ul class="subnav"><li> <a href="#"> Example 1 </a></li><li> <a href="#"> Example 2 </a></li><li> <a href="#"> Example 3 </a></li>  </ul> </li> <li> <a href="#"> Services </a><ul class="subnav"><li> <a href="#"> Services 1 </a> </li><li> <a href="#"> Services 2 </a> </li><li> <a href="#"> Services 3 </a> </li></ul> </li> <li> <a href="#"> About Us </a> </li> <li> <a href="#"> Contact  </a></li></ul></div>

</body> </html>

CSS文件

.container{

width:950px;margin:10px auto;font: 14px "Helvetica Neua",Arial,Helvetica,Geneva,sans-serif;border: 1px solid #333;

}

margin: 10px;

}

ul#navigation{

list-style-type: none;background:#CE0100;height: 63px;font-size: 24px;

}

ul#navigation li{

float: left;width: 175px;text-align: center;position: relative;height: 63px;padding: 20px 5px 10px 5px;

}

ul#navigation li a{

color: #fff;text-decoration: none;display: block;

}

ul#navigation li a.active{

border: 1px solid blue;

}

ul#navigation li ul.subnav{

background:#E7F1D2;width: 175px;clear: both;display: none;position: absolute;top: 63px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-left:2px solid #998;border-bottom:2px solid #998;

}

ul#navigation li ul.subnav li{

clear: both;height: 40px;padding: 0;text-align: center;margin:0px;

}

ul#navgation li ul.subnav li a{

background:none;font-size: 18px;color: #333;text-decoration: none;padding: 10px 0;border: none;

}

ul#navgation li ul.subnav li a:hover{

background:#DBF1AD;font-size: 18px;color: #333;border: none;

}

1 0