• jquery之下拉菜单


     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>无标题文档</title>
     6 <style type="text/css">
     7 *{ margin:0px; padding:0px;}
     8  #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
     9  ul{ list-style:none;}
    10  ul li{ float:left;  line-height:40px; text-align:center; position:relative;}
    11  a{ text-decoration:none; color:#000; display:block; width:90px;}
    12  a:hover{ color:#FFF; background-color:#666;}
    13  ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; } 
    14  ul li ul{  width:90px; position:absolute; left:0px; top:40px; display:none;}
    15  
    16 </style>
    17 <script src="js/jquery.1.9.1.js"></script>
    18 
    19 <script type="text/javascript">
    20   $(function(){
    21      $(".navmenu").mouseover(function(){
    22          $(this).children("ul").show();
    23          
    24          
    25          })
    26      $(".navmenu").mouseout(function(){
    27          
    28          $(this).children("ul").hide();
    29          
    30          })
    31       
    32       })
    33   
    34 </script>
    35 
    36 </head>
    37 
    38 <body>
    39 <div id="menu">
    40    <ul>
    41    
    42   <li><a href="#">首页</a></li>
    43   <li class="navmenu"><a href="#">课程大厅</a>
    44       <ul>  
    45          <li><a href="#">JavaScript</a></li>
    46          <li><a href="#">jQuery</a></li>
    47       </ul>
    48   
    49   </li>
    50   <li class="navmenu"><a href="#">学习中心</a>
    51       <ul>
    52          <li><a href="#">视频学习</a></li>
    53          <li><a href="#">案例学习</a></li>
    54          <li><a href="#">交流平台</a></li>
    55       </ul>
    56   </li>
    57   <li><a href="#">经典案例</a></li>
    58   <li><a href="#">关于我们</a></li>
    59   
    60 </ul>
    61 
    62 
    63 </div> 
    64           </body>
    65 </html>

    效果图:

  • 相关阅读:
    Linux中./configure、make、make install详解
    VMware虚拟CentOS 6.5在NAT模式下配置静态IP地址及Xshell远程控制配置
    VMWare中Linux虚拟机设置静态IP上网的设置方法
    Linux下SSH远程连接断开后让程序继续运行解决办法
    弱网测试(一)
    算法的测试
    前端图片加载优化
    jpg/jpeg/png格式的区别与应用场景
    测试分类标准
    Mysql 日期与时间戳的相互转化
  • 原文地址:https://www.cnblogs.com/youbiao/p/7220388.html
Copyright © 2020-2023  润新知