简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 三级下拉菜单
Blogger Information
Blog 22
fans 0
comment 1
visits 17607
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
三级下拉菜单
刘静的博客
Original
771 people have browsed it

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>01.三级下拉菜单</title>
<script type="text/javascript" src="../static/jQuery/jquery-3.4.1.min.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
.menu{width:800px;height:35px;margin:0px auto;background:#000;margin-top:20px;color:#fff;border:1px solid #ccc;border-radius:5px;}
ul{list-style:none;}
ul li{width:100px;height:35px;line-height:35px;text-align:center;float:left;border-right:1px solid #ccc;cursor:pointer;}
.twobox li{width:100px;height:30px;line-height:30px;background:#2D2D2D;color:#A9A9A9;font-size:14px;position:relative;border:0px;}
.twobox li:hover{background:#000;color:#fff;}
.three{position:absolute;top:0px;left:100px;}
.three li{width:99px;height:30px;line-height:30px;border:0px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//隐藏二级与三级下拉菜单
$(‘.twobox’).hide();
$(‘.three’).hide();


//当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单
$(‘.one>li’).mouseover(function(){
$(this).find(‘.twobox’).slideDown(500);
})

//当鼠标移出包含二级菜单的一级菜单时隐藏当前二级菜单
$(‘.one>li’).mouseleave(function(){
$(this).find(‘.twobox’).slideUp(500);
})

//当鼠标移动到包含三级菜单的二级菜单时显示当前三级菜单
$(‘.two’).mouseover(function(){
$(this).find(‘.three’).slideDown(500);
})

//当鼠标移出包含三级菜单的二级菜单时隐藏三级菜单
$(‘.two’).mouseleave(function(){
$(this).find(‘.three’).slideUp(500);
})




})
</script>
<div class="menu">
<ul class="one">
<li>首 页</li>
<li>产 品
<ul class="twobox">
<li>产品1</li>
<li class="two">产品2
<ul class="three">
<li>产品1.1</li>
<li>产品1.2</li>
<li>产品1.3</li>
<li>产品1.4</li>
</ul>
</li>
<li class="two">产品3
<ul class="three">
<li>产品3.1</li>
<li>产品3.2</li>
<li>产品3.3</li>
<li>产品3.4</li>
</ul>
</li>
<li>产品4</li>
</ul>
</li>
<li>公司新闻
<ul class="twobox">
<li>公司新闻1</li>
<li class="two">公司新闻2
<ul class="three">
<li>公司新闻2.1</li>
<li>公司新闻2.2</li>
<li>公司新闻2.3</li>
<li>公司新闻2.4</li>
</ul>
</li>
<li class="two">公司新闻3
<ul class="three">
<li>公司新闻3.1</li>
<li>公司新闻3.2</li>
<li>公司新闻3.3</li>
<li>公司新闻3.4</li>
</ul>
</li>
<li>公司新闻4</li>
</ul>
</li>
<li>行业新闻
<ul class="twobox">
<li>行业新闻1</li>
<li class="two">行业新闻2
<ul class="three">
<li>行业新闻2.1</li>
<li>行业新闻2.2</li>
<li>行业新闻2.3</li>
<li>行业新闻2.4</li>
</ul>
</li>
<li class="two">行业新闻3
<ul class="three">
<li>行业新闻3.1</li>
<li>行业新闻3.2</li>
<li>行业新闻3.3</li>
<li>行业新闻3.4</li>
</ul>
</li>
<li>行业新闻4</li>
</ul>
</li>
<li>联系我们</li>
</ul>
</div>
</body>
</html>

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！