谁能实现二级菜单的显示过后的那种样式啊 本人把字加进去过后他的样式也跟着导航条的样式变了
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
width:80%;
height:500px;
margin:20px auto;
}
ul{
list-style: none;
width:100%;
height:30px;
background-color: saddlebrown;
position: relative;
}
ul li{
width:9%;
height: 30px;
line-height: 30px;
background-color: rgb(44,19,1);
float:left;
margin-left:1px;
text-align: center;
color:white;
font-size:14px;
}
ul li a{
text-decoration: none;
}
.box{
display: none;
width:800px;
height:400px;
border:2px solid rgb(44,19,1);
color:black;
position: absolute;
top:30px;
left:40px;
}
.box ul li{
background-color: white;
list-style: none;
}
.rm{
font-weight: bold;
color:orange;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("ul li").each(function(index){
$(this).mousemove(function(){
$(this).children().show();
$(this).css({"background-color":"white","color":"rgb(44,19,1)","border":"2px solid rgb(44,19,1)"});
});
$(this).mouseout(function(){
$(this).children().hide();
$(this).css({"background-color":"rgb(44,19,1)","color":"white","border":"2px solid rgb(44,19,1)"});
});
});
});
</script>
</head>
<body>
<div class="content">
<ul>
<li>
首页
<div class="box">
<ul>
<li><span class="rm">热门:</span></li>
<li><span>秋冬新品</span></li>
<li>雪地靴</li>
<li>满帮</li>
<li>及踝靴</li>
<li>短靴</li>
<li>中靴</li>
<li>长靴</li>
<li><span>断码特价</span></li>
<li>松糕鞋</li>
<li>毛靴</li>
<li>高筒靴</li>
</ul>
</div>
</li>
<li>女鞋馆 <div class="box">
测试2
</div></li>
<li>男鞋馆<div class="box">
测试3
</div></li>
<li>女装馆<div class="box">
测试4
</div></li>
<li>男装馆 <div class="box">
测试5
</div></li>
<li>箱包馆 <div class="box">
测试6
</div></li>
<li>儿童馆 <div class="box">
测试7
</div></li>
<li>户外馆 <div class="box">
测试8
</div></li>
<li>运动馆 <div class="box">
测试9
</div></li>
</ul>
</div>
</body>
</html>
