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

原创 2019-08-21 16:19:55 578
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>三级下拉菜单</title><script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<!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>


批改老师:天蓬老师批改时间:2019-08-22 15:32:17
老师总结:多级下拉菜单, 通常会配合无限分类来做的

发布手记

热门词条