返回 三级下拉菜单... 登陆

三级下拉菜单

Kevin King 2019-06-05 23:50:45 204

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


最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

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