本站资源均来自互联网,仅供学习与参考,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
Copyright @ 2015-2020 织梦园 版权所有
Power by DedeCms
鲁ICP备15039853号-1
鲁公网安备 37132302000249号
模板标签 TAG标签 网站地图 XML地图 今日更新 返回顶部
<!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代码:
#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代码:
$(document).ready(function() { $('.m-one').hover( function(){$(this).children('.m-ul').slideDown(200);}, function(){$(this).children('.m-ul').slideUp(200);} ); }); |