学习JQUERY,写的简单下拉菜单！

响应式电子商务公司网站模板

响应式美食糕点企业网站模板

厨房卫浴水龙头网站模板

响应式自动化设备科技企业网站模板
(自适应手机端)品牌策划设计类网站pbootcms模板高端

(自适应手机版)黄色响应式车行汽车租赁网站pbootcms模

(自适应手机端)响应式pbootcms装修设计装潢公司网站模

(自适应手机端)响应式别墅办公家庭装修装饰设计类pboo
迪恩摄影Pai(7配色) 商业版（GBK）

响应式红木实木家具网站模板

迪恩car!汽车二手车交易Discuz模板 X3.2商业版

律师事务所法务咨询网站模板

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);}  

                );  

            });

作者：欣怡建站挑错时间：2016-04-14 22:51

上一篇：对帝国cms、dedecms、phpcms等负载测试总结
下一篇：浅谈：织梦CMS仿站的一些小结

☉首先声明，只要是我们的vip会员所有源码均可以免费下载，不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品源码，源码在于可用，不在多！！希望在这里找到你合适的。
☉本站提供的整站程序，均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源（包括源码、模板、素材、特效等）仅供学习与参考，请勿用于商业用途。
☉如有其他问题，请加网站客服QQ(984818011)进行交流。