毕业设计网
开发环境 |

网页特效 JQ二级菜单 Jquey二级菜单

<!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=utf-8" />
<title>网页特效 JQ二级菜单 Jquey二级菜单 www.fs526.com </title>
</head>
<script src="js/jquery.js"></script>
<script>
function jquery(e){
 $("ul").removeClass("hover");
    jQuery(e).mouseover(function() {
   jQuery(e).children("ul").show(300);
  });
         jQuery(e).mouseleave(function() {
    jQuery(e).children("ul").hide(300);
  });
}
</script>
<style>
body{
 font-size:12px;
}
.ul_menuDrop1 li{
 width:70px; height:20px; text-align:center; float:left; margin:0 5px; border:1px solid #dedede; list-style-type:none; line-height:20px; position:relative; left:0px; top:0px; cursor:pointer
}
.hover{
 background:#f00; 
}
.out{
 background:#fc0;
}
.ul_menuDrop2{
 position:absolute; left:-46px; display:none
}
.ul_menuDrop3{
 position:absolute; left:26px; top:0px; display:none
}
</style>
<body>
<div>
 <ul class="ul_menuDrop1">
     <li onmouseover="jquery(this);">
        <a href="#" id="v0">01</a>
        <ul class="ul_menuDrop2" id="server">
         <li onmouseover="jquery(this);">
             <a href="#">01-01</a>
                 <ul class="ul_menuDrop3">
                   <li><a href="#">01-01-01</a></li>
                     <li><a href="#">01-01-02</a></li>
                     <li><a href="#">01-01-03</a></li>
                 </ul>
            </li>
            <li onmouseover="jquery(this);">
             <a href="#">01-02</a>
                <ul class="ul_menuDrop3">
                   <li><a href="#">01-02-01</a></li>
                     <li><a href="#">01-02-02</a></li>
                     <li><a href="#">01-02-03</a></li>
                 </ul>
            </li>
        </ul>
        </li>
        <li onmouseover="jquery(this);">
         <a href="#">02</a>
         <ul class="ul_menuDrop2">
          <li onmouseover="jquery(this);">
              <a href="#">02-01</a>
                  <ul class="ul_menuDrop3">
                    <li><a href="#">02-01-01</a></li>
                      <li><a href="#">02-01-02</a></li>
                      <li><a href="#">02-01-03</a></li>
                  </ul>
             </li>
             <li onmouseover="jquery(this);">
              <a href="#">02-02</a>
                 <ul class="ul_menuDrop3">
                    <li><a href="#">02-02-01</a></li>
                      <li><a href="#">02-02-02</a></li>
                      <li><a href="#">02-02-03</a></li>
                  </ul>
             </li>
        </ul>
        </li>
        <li onmouseover="jquery(this);">
         <a href="#">03</a>
         <ul class="ul_menuDrop2">
          <li onmouseover="jquery(this);">
              <a href="#">03-01</a>
                  <ul class="ul_menuDrop3">
                    <li><a href="#">03-01-01</a></li>
                      <li><a href="#">03-01-02</a></li>
                      <li><a href="#">03-01-03</a></li>
                  </ul>
             </li>
             <li onmouseover="jquery(this);">
              <a href="#">03-02</a>
                 <ul class="ul_menuDrop3">
                    <li><a href="#">03-02-01</a></li>
                      <li><a href="#">03-02-02</a></li>
                      <li><a href="#">03-02-03</a></li>
                  </ul>
             </li>
        </ul>
        </li>
 </ul>
</div>
</body>
</html>
 

以上是一部分介绍,如需要完整的资料或者如不符合您的要求,请联系技术人员qq:242219979咨询

上一篇:打印页面 打印预览 WebBrowser.ExecWB的完整说明
下一篇:sqlserver2000 附加数据库失败 错误602


版权所有 毕业设计网联系qq:242219979 © 2007-2022