有动画效果了，但是导航css出现问题，不能全部显示子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery动画 animate（）</title>
<script type="text/javascript" src="jquery-3.3.1.min.js">
</script>
<style>
div{width:1800px;height:48px;background-color:#ccc}
ul li{text-align:center;line-height:40px;border-radius: 5px; list-style-type:none;background-color:#0080c0;width:200px;height:40px;font-size:20px;font-weight:bold;float:left;margin:2px 2px;}
li#li10,#li11,#li12{position:absolute;float: left;}
.box{width:200px;height:400px;background-color:royalblue;position: relative;}
</style>
</head>
<body>
<script type="text/javascript" >
$(document).ready(function(){
$('li').hover(
function(){
$(this).css({'background':'red','color':'white','borderBottom':'4px solid #4610da'})
},function(){
$(this).css({'background':'#0080c0','color':'black','borderBottom':'none'})
})
$('.box').hide()
$('#li2').hover(
function(){
$('.box').show()
},
function(){
$('.box').hide()
})
})
</script>
<div>
<ul>
<li id='li1'>首页</li>
<li id='li2'>产品
<div class="box">
<ul>
<li id='li10'>产品1</li>
<!-- 不明白为啥li10，li11不显示出来 -->
<li id='li11'>产品2</li>
<li id='li12'>产品3</li>
</ul>
</div>
</li>
<li id='li3'>新闻</li>
<li id='li4'>案例</li>
<li id='li5'>联系我们</li>
<li id='li6'>公司简介</li>
<li id='li7'>招聘信息</li>
<li id='li8'> 在线留言</li>
</ul>
</div>
</body>
</html>