Question

网站导航菜单栏，鼠标经过出现下拉菜单怎么做？

具体代码请看：
<div class="nav">
<div class="nav1200">
<ul>
<li><a href="index.html" class="on">首页</a></li>

<li><a href="">百科知识</a>
<ul><li>百科知识1</li><li>百科知识2</li><li>百科知识3</li></ul>
</li>
<li><a href="">百度知道</a></li>

<li><a href="">百度贴吧</a>
<ul><li>百度贴吧1</li><li>百度贴吧2</li><li>百度贴吧3</li></ul>
</li>

</ul>
</div>
</div>

我要实现：

鼠标经过百科知识，出现下拉，显示3个二级分类
鼠标经过百度贴吧，出现下拉，显示3个二级分类

出现下拉不要0秒，可以给个适当延迟0.2或者0.3秒过渡稍慢展开，视觉效果好些。怎么写JS代码来控制样式？谢谢！

Answer 1

使用hover伪类就可以实现，先写好下拉框，然后隐藏，hover的时候显示就可以了

Answer 2

用原生写，还是JQ写

追问

都可以吧，只要能实现就好

追答

<style>

ul,li{list-style: none;margin: 0;padding: 0;}

.nav1200{width: 500px;margin: 0 auto;}

.nav1200 .navList{display: flex;}

.nav1200 .navList>li{width: 25%;position: relative;height: 26px;text-align: center;}

.nav1200 .navList li ul{

width: 100%; position: absolute;

top: 25px; left: 0;

border: 1px solid #ddd;

padding: 10px; display: none;

}

.nav1200 .navList li ul li{padding: 5px;}

</style>

<div class="nav">

<div class="nav1200">

<ul class="navList">

<li>

<a href="index.html" class="on">首页</a></li>

<li>

<a href="">百科知识</a>

<ul><li>百科知识1</li><li>百科知识2</li><li>百科知识3</li></ul>

</li>

<li><a href="">百度知道</a></li>

<li><a href="">百度贴吧</a>

<ul><li>百度贴吧1</li><li>百度贴吧2</li><li>百度贴吧3</li></ul>

</li>

</ul>

</div>

</div>

<script src="jq.js" type="text/javascript" charset="utf-8"></script>

<script>

$('.navList>li').on('mouseenter',function(){

$(this).find('ul').slideDown()

})

$('.navList>li').on('mouseleave',function(){

$(this).find('ul').slideUp()

})

</script>

追问

我的样式我都定义好了，你这改一下很乱了，能不能留个联系方式或者加我帮忙看看解决一下？

追答

把你的贴出来

追问

这里发不了。字数超过了，你加我一下可以吗？

追答

不显示你的信息，你给我发消息吧

追问

我给你发私信了，你没看到吗？