学习JQUERY,写的简单下拉菜单！
[html] view plaincopy
>
<html>
<head>
<script type="text/javascript" src="
/jquery/1.7.2/jquery.min.js">script>
<title>side menutitle>
head>
<body>
<div id="menu">
<div class="m-one">
<span class="m-tit">主菜单01span>
<ul class="m-ul">
<li class="m-li">子菜单11li>
<li class="m-li">子菜单12li>
<li class="m-li">子菜单13li>
ul>
div>
<div class="m-one">
<span class="m-tit">主菜单02span>
<ul class="m-ul">
<li class="m-li">子菜单21li>
<li class="m-li">子菜单22li>
#p#分页标题#e#<li class="m-li">子菜单23li>
ul>
div>
<div class="m-one">
<span class="m-tit">主菜单03span>
<ul class="m-ul">
<li class="m-li">子菜单31li>
<li class="m-li">子菜单32li>
<li class="m-li">子菜单33li>
ul>
div>
<div class="m-one">
<span class="m-tit">主菜单04span>
<ul class="m-ul">
<li class="m-li">子菜单41li>
<li class="m-li">子菜单42li>
<li class="m-li">子菜单43li>
ul>
div>
#p#分页标题#e#<div class="m-one">
<span class="m-tit">主菜单05span>
<ul class="m-ul">
<li class="m-li">子菜单51li>
<li class="m-li">子菜单52li>
<li class="m-li">子菜单53li>
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(
#p#分页标题#e#function(){$(this).children('.m-ul').slideDown(200);},
function(){$(this).children('.m-ul').slideUp(200);}
);
});
本文手机访问二维码
☉本站的源码不会像其它下载站一样植入大量的广告。
☉本站只提供精品织梦源码，源码在于可用，不在多！！希望在这里找到你合适的。
☉本站提供的整站织梦程序，均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源（包括源码、模板、素材、特效等）仅供学习与参考，请勿用于商业用途。
☉如有其他问题，请加网站客服QQ(971977809)进行交流
SEO 推广
