本站资源均来自互联网,仅供学习与参考,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
Copyright @ 2015-2020 织梦园 版权所有
Power by DedeCms
鲁ICP备15039853号-1
鲁公网安备 37132302000249号
模板标签 TAG标签 网站地图 XML地图 今日更新 返回顶部
HTML代码:
[html] view plaincopy
- <!DOCTYPE html>
- <html>
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
- /jquery/1.7.2/jquery.min.js"></script>
- <title>side menu</title>
- </head>
- <body>
- <div id="menu">
- <div class="m-one">
- <span class="m-tit">主菜单01</span>
- <ul class="m-ul">
- <li class="m-li">子菜单11</li>
- <li class="m-li">子菜单12</li>
- <li class="m-li">子菜单13</li>
- </ul>
- </div>
- <div class="m-one">
- <span class="m-tit">主菜单02</span>
- <ul class="m-ul">
- <li class="m-li">子菜单21</li>
- <li class="m-li">子菜单22</li>
- <li class="m-li">子菜单23</li>
- </ul>
- </div>
- <div class="m-one">
- <span class="m-tit">主菜单03</span>
- <ul class="m-ul">
- <li class="m-li">子菜单31</li>
- <li class="m-li">子菜单32</li>
- <li class="m-li">子菜单33</li>
- </ul>
- </div>
- <div class="m-one">
- <span class="m-tit">主菜单04</span>
- <ul class="m-ul">
- <li class="m-li">子菜单41</li>
- <li class="m-li">子菜单42</li>
- <li class="m-li">子菜单43</li>
- </ul>
- </div>
- <div class="m-one">
- <span class="m-tit">主菜单05</span>
- <ul class="m-ul">
- <li class="m-li">子菜单51</li>
- <li class="m-li">子菜单52</li>
- <li class="m-li">子菜单53</li>
- </ul>
- </div>
- </div>
- </body>
- </html>
CSS代码:
[css] view plaincopy
- #menu {}
- .m-one {float:left;width:100px;height:40px;line-height:40px; text-align:center; background:#eeeeee;}
- .m-one:hover{background:#dddddd;}
- ul,li {list-style:none; margin:0;padding:0;}
- .m-ul {background:#dddddd; display:none;}
- .m-li {font-size:12px; height:25px; line-height:25px;}
- .m-li:hover {background:#cccccc;}
JQUERY代码:
[javascript] view plaincopy
- $(document).ready(function() {
- $('.m-one').hover(
- function(){$(this).children('.m-ul').slideDown(200);},
- function(){$(this).children('.m-ul').slideUp(200);}
- );
- });