jquery网站导航的 下拉级联菜单

来源:互联网 发布:python idle打开 编辑:程序博客网 时间:2024/05/22 06:47

CSS效果没有涉及,所以是列表的形式

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>下拉级联菜单链表</title> </head> <body>      <div id="menudiv">  <ul id="mainmenu"> <!-- 最上层单元-->      <li><a href="#" > 1 HTML</li>      <li><a href="#" > 2 CSS </li>  <li><a href="#" > 3 JavaScript </li>            <ul>  <li><a href="#">3.1 jQuery</a>    <ul>      <li><a href="#">3.1.1 Download</a></li>  <li><a href="#">3.1.2 Tutorial                </ul>  </li>  <li> <a href="#">3.2 Mootools</a></li>  <li> <a href="#">3.3 Pototype</a></li></ul>   </li></ul>   </div>      <script type="text/JavaScript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>      <script>     $(document).ready(function(){     $("# mainmanu ul").css({display:"none"}); $("# mainmanu li").hover(function(){    $(this).find('ul:first').css({visibility:"visible"}).show(400);},function(){   $(this).find('ul:first').css({visibility:"hidden"});}); });  </script> </body></html>


0 0
原创粉丝点击