三级下拉菜单

原创2019-06-05 23:50:45107
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>三级下拉菜单</title> <style type="text/css"> *{margin: 0px;padding: 0px;} div{width:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

<style type="text/css">

*{margin: 0px;padding: 0px;}

div{width: 1000px;height: 40px;background-color: #000;margin: 0 auto;color: #FFF;}

li{width: 200px;line-height: 40px;list-style: none;line-height: 40px;float: left;text-align: center;}

.box2 li{width: 200px;line-height: 40px;background-color: #000;height: 40px;}

.box3{position: relative;float: left;top: -40px;left: 200px;}

</style>

<script type="text/javascript" src="jquery-3.4.1.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('.box2').hide()

$('.box3').hide()

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

$(this).find('.box2').slideDown(500)

})

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

$(this).find('.box2').slideUp(500)

})

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

$(this).find('.box3').slideDown(500)

})

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

$(this).find('.box3').slideUp(500)

})


})

</script>

</head>

<body>

<div id="menu">

<ul class="box1">

<li>首页</li>

<li class="box5">产品

<ul class="box2">

<li>产品一</li>

<li class="box4">产品二

<ul class="box3">

<li>产品一</li>

<li>产品二</li>

<li>产品三</li>

</ul>

</li>

<li class="box4">产品三

<ul class="box3">

<li>产品一</li>

<li>产品二</li>

<li>产品三</li>

</ul>

</li>

<li>产品四</li>

</ul>

</li>

<li class="box5">服务

<ul class="box2">

<li>服务一</li>

<li class="box4">服务二

<ul class="box3">

<li>服务一</li>

<li>服务一</li>

</ul>

</li>

<li>服务三</li>

</ul>

</li>

<li>品质</li>

<li>关于</li>

</ul>

</div>

</body>

</html>


批改老师:查无此人批改时间:2019-06-06 09:46:29
老师总结:完成的不错。三级联动在页面展示中,用到的比较频繁,比如分类页会有二级,加商品,就是三级。继续加油。

发布手记

热门词条