手把手教你做下拉列表

 !doctype html 

 html lang="en" 

 head 

 meta charset="UTF-8" / 

 script type="text/javascript" src="js/jquery-1.9.1.min.js" /script 

 title Document /title 

 style 

 .box {

 font-size: 14px;

 list-style: none;

 margin: 15px auto;

 padding: 0px;

 width: 1000px;

 color: white;

 .box li {

 font-size: 14px;

 float: left;

 width: 200px;

 height: 35px;

 line-height: 35px;

 text-align: center;

 cursor: pointer;

 background: #333;

 .box li .pox {

 list-style: none;

 margin: 0px;

 padding: 0px;

 display: none;

 color: red;

 .box li .pox li{

 background: blueviolet;

 /style 

 script 

 $(function(){

 $(.box li).hover(function(){

 $(this).find(.pox).slideDown(normal);

 },function(){

 $(this).find(.pox).stop().slideUp(normal);

 /script 

 /head 

 body 

 li 导航列表1

 li 导航列表11 /li 

 li 导航列表11 /li 

 li 导航列表11 /li 

 li 导航列表11 /li 

 li 导航列表11 /li 

 /ul 

 /li 

 li 导航列表2

 li 导航列表22 /li 

 li 导航列表22 /li 

 li 导航列表22 /li 

 li 导航列表22 /li 

 li 导航列表22 /li 

 /ul 

 /li 

 li 导航列表3

 li 导航列表33 /li 

 li 导航列表33 /li 

 li 导航列表33 /li 

 li 导航列表33 /li 

 li 导航列表33 /li 

 /ul 

 /li 

 li 导航列表4

 li 导航列表44 /li 

 li 导航列表44 /li 

 li 导航列表44 /li 

 li 导航列表44 /li 

 li 导航列表44 /li 

 /ul 

 /li 

 li 导航列表5

 li 导航列表55 /li 

 li 导航列表55 /li 

 li 导航列表55 /li 

 li 导航列表55 /li 

 li 导航列表55 /li 

 /ul 

 /li 

 /ul 

 /body 

 /html