<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery.1.9.0.min.js"></script> <script src="js/menu_js.js"></script> <style> body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体"; padding:20px;}/*文档清零,字体,字号,背景设置.*/ div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td,caption{margin:0;padding:0;}/*边界元素清零*/ ul,li,ol{list-style:none;}/*去除列表符号*/ a{text-decoration:none;}/*去除超链接下划线*/
.add{height:37px; width:124px; float:left; margin-right:8px; display:inline; position:relative} .add h3{height:37px; width:124px; text-align:center; border-radius:7px; background:#3091BC;color:#fff; font-size:14px; line-height:37px; font-weight:normal;cursor:pointer} .content{ position:absolute; left:0; top:37px; background:#E8E8E8; display:none} .content li{height:37px; line-height:37px;margin-top:2px;} .content li a{color:#5e5e5e; font-size:14px; display:block;height:37px; width:107px; background:#E9E9E9; padding-left:17px;} .content li a:HOVER{background:#36A4D5;color:#fff; height:36px; border-bottom:1px solid #3091BC} .active { background:#27c43d }
</style> </head> <body> <div class="add" id="add"> <h3 >新增员工</h3> <ul class="content"> <li><a href="">批量导入员工</a></li> <li><a href="">在线新增员工</a></li> </ul> </div>
</body> </html>
//js
$(document).ready(function () {
$("#add").mouseover(function () {
$("#add ul").show();
}).mouseleave(function () {
$("#add ul").hide();
})
})
<script type="text/javascript"> (function ($) { $.fn.Switch = function () { var _this = $(this); return this.each(function () { _this.hover(function () { $("ul", _this).show(); }, function () { $("ul", _this).hide(); }); }); }; })(jQuery) $(function () { $("#add").Switch(); }); </script>
谢谢你啊
呜呜太谢谢你了,好开心,好漂亮的代码,嘿嘿
好感动呵呵
太客气了,举手之劳而已。
蛋疼
有病
这是解决问题的地方,不是你说脏话的地方,解决不了,请不要污染我的地方。