返回2019-8-......登陆

2019-8-21 jquery三级下拉菜单

辰晨2019-08-21 16:19:5529

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>三级下拉菜单</title>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<style>

body{

margin:0;

}

li{

list-style:none;

}

ul{

padding:0;

}

.menu{

width:600px;

height:44px;

background:#000;

margin:0 auto;

}

a{

text-decoration: none;

color:#fff;

}


.one{

width:120px;

height: 44px;

float: left;

text-align: center;

line-height: 44px;

}

.twomenu{

width:120px;

background:#000;

position: relative;

}

.threemenu{

width:120px;

background:#000;

margin-top:-44px;

position: absolute;

left:120px;

}

li:hover{

background-color: #333;

}

</style>

</head>

<body>

<script>

$(document).ready(function(){

$('.twomenu').hide();

$('.threemenu').hide();

$('.one').mouseover(function(){

$(this).find('.twomenu').slideDown(500);

})

$('.one').mouseleave(function(){

$(this).find('.twomenu').slideUp(500);

})


$('.two').mouseover(function(){

$(this).find('.threemenu').slideDown(500);

})

$('.two').mouseleave(function(){

$(this).find('.threemenu').slideUp(500);

})

})

</script>

    <ul>

     <li><a href="">一级导航01</a>

     <ul>

     <li><a href="">二级导航01</a>

     </li>

     <li><a href="">二级导航02</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     <li><a href="">二级导航03</a>

     </li>

     <li><a href="">二级导航04</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     </ul>

     </li>

     <li><a href="">一级导航02</a>

     <ul>

     <li><a href="">二级导航01</a>

     </li>

     <li><a href="">二级导航02</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     <li><a href="">二级导航03</a>

     </li>

     <li><a href="">二级导航04</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     </ul>

     </li>

     <li><a href="">一级导航03</a>

     <ul>

     <li><a href="">二级导航01</a>

     </li>

     <li><a href="">二级导航02</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     <li><a href="">二级导航03</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     <li><a href="">二级导航04</a>

     </li>

     </ul>

     </li>

     <li><a href="">一级导航04</a>

     <ul>

     <li><a href="">二级导航01</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     <li><a href="">二级导航02</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     <li><a href="">二级导航03</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     <li><a href="">二级导航04</a>

     </li>

     </ul>

     </li>

     <li><a href="">一级导航05</a>

     <ul>

     <li><a href="">二级导航01</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     <li><a href="">二级导航02</a>

     </li>

     <li><a href="">二级导航03</a>

     <ul>

     <li><a href="">三级导航01</a></li>

     <li><a href="">三级导航02</a></li>

     </ul>

     </li>

     <li><a href="">二级导航04</a>

     </li>

     </ul>

     </li>

    </ul>

</body>

</html>


最新手记推荐

• 依赖注入小例子• 模板显示用户信息表,并分页显示• 模板继承,模仿php页面• 模拟用户登录验证的案例 依赖注入 Facade• 创建一个验证器, 用来对模型对应的表中字段进行验证处理

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网