JQuery鼠标经过弹出菜单

最新推荐文章于 2019-06-28 08:51:56 发布

weixin_30396699

最新推荐文章于 2019-06-28 08:51:56 发布

阅读量317

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/enson99/archive/2011/09/27/2193200.html

版权

本文中的例子是使用了jQuery框架来实现，当鼠标划过按钮的时候出现下拉菜单。

View Code

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<!--这里是引用官方的JQUERY库，要用的时候可以下载到本地-->
<script language="javascript" type="text/javascript" src=" http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
//menu
$(document).ready(function(){

  $('li.mainlevel').mousemove(function(){
  $(this).find('ul').slideDown("1000");//可以自己修改速度
  });
  $('li.mainlevel').mouseleave(function(){
  $(this).find('ul').slideUp("fast");
  });

});
</script>
<title>JQuery鼠标经过弹出菜单</title>
<style type="text/css">
 html, body, ul, li {padding:0; margin:0;}
 body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;}
 ul,li {list-style-type:none; text-transform:capitalize;}
 .clear {clear:both; *display:inline;/*IE only*/}

/*menu*/
 #menu {margin:100px auto; display:block; width:1000px; height:34px;}
 #nav {display:block;}
 #nav .mainlevel {float:left; background:#3f240e; text-align:center; display:block;}
 #nav .mainlevel a {color:#fff; text-decoration:none; line-height:34px; height:34px; text-align:center; padding:0 20px; display:block; _width:48px;}
 #nav .mainlevel a:hover {color:#3f240e; text-decoration:none; background:#678900;}
 #nav .mainlevel ul {position:absolute; display:none; *width:2000px;/*IE is great need, width>=li.length*/}
 #nav .mainlevel li {float:left; background:#3f240e;}
 #nav .mainlevel li a {padding:0 12px; line-height:24px; height:24px; display:block; _padding-bottom:6px;/*IE6 only*/}
 #nav .mainlevel li a:hover {color:#3f240e; text-decoration:none; background:#678900;}
 #nav li a em/*input an em tag as a space*/ {padding:0 3px;}
 .note {color:#3f240e; border-right:1px solid #fff; background:#678900; display:block; line-height:34px; padding:0 3em;}
 .Triangle_con {height:5px; display:block; _margin-bottom:-6px;/*IE6 only*/}
 .log {margin:100px auto; width:1000px; text-transform:capitalize; line-height:200%;}
</style>
</head>
<body>
<div id="menu">
<ul id="nav">
<li class="mainlevel" id="mainlevel_01"><a href="#">MENU</a>
<ul class="sub_nav_01">
<span class="Triangle_con"></span>
<li><a href="#">指南 </a></li>
<li><a href="#">目录 </a></li>
<li><a href="#">申请 </a></li>
<li><a href="#">意见箱</a></li> 
</ul>
</li>
</ul>
</div>
</body>
</html>