jq三级导航

Original 2019-03-18 15:52:29 325
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>三级导航</title><script type="text/javascript" src="jquery-3.3.1.min.js"><

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>三级导航</title>

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

<style type="text/css">

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

.top{width: 1200px;height: 36px;margin: 0px auto;margin-top: 60px;}

ul,li{list-style: none;}

ul li{width: 150px;height:36px;line-height: 36px;text-align: center;font-size: 16px;float: left;cursor: pointer;background-color: #f1f1f1;}

.one > li{border-right: 2px solid lightblue;}

.one > li:last-child{border-right: none;}

.tow{display: none;}

.tow > li{width: 150px;height: 36px;position: relative;border: 0px;border-top: 1px solid lightblue;}

.three {position: absolute; top: 0px;left: 150px;}

     .three li {width: 150px;height: 36px;line-height: 36px;border: 0;border-top: 1px solid lightblue;}

.current{background-color: lightblue;font-weight: bold}

</style>

</head>

<body>

<div>

<ul>

<li>首页</li>

<li>产品介绍

<ul>

<li>新产品</li>

<li>拳头产品</li>

<li>实验产品</li>

</ul>

</li>

<li>新闻中心

<ul>

<li>公司新闻</li>

<li>行业新网</li>

<li>国家新闻

<ul>

<li>行业</li>

<li>军事</li>

<li>文娱</li>

</ul>

</li>

</ul>

</li>

<li>关于我们</li>

<li>联系我们</li>

</ul>

</div>

</body>

<script type="text/javascript">

$(document).ready(function(){


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

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

})


$('.one>li').mouseout(function() {

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

})


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

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

        })


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

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

        })

})

</script>

</html>



老师为什么我的导航鼠标移上,动一下它就执行向下拉伸效果?

Release Notes

Popular Entries