HTML代码：
[html] view plaincopy
- >
- <html>
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
- /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>
- <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>
- <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(
- function(){$(this).children('.m-ul').slideDown(200);},
- function(){$(this).children('.m-ul').slideUp(200);}
- );
- });
Pbootcms问题解决
请点击在线联系我们【点击咨询解决问题】 如果您有任何Pbootcms问题，我们将免费为您写解决教程！
