怎么把一级导航条在移动到该选项是文字 会往上移动，还有移动到二级导航条怎么使其选项变颜色
<title>无标题文档</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:none;
/*整体的与边界距离*/
}
#menu{
width:1380px;
height:40px;
background-color: #FFF;
position:absolute;
top:0px;
/*导航条的放置方式*/
}
#menu ul li {
list-style:none;
display:block;
/*导航条的放置方式*/
}
#menu ul li a{ display:block;
float: left;
height:45px;
color: #000;
margin-right:5px;
margin-top:10px;
padding:0 58.4px;
font-size: 18px;
list-style:none;
text-decoration: none;
position: relative;
display:block;
}
#menu ul li a:hover {
background-color: #C00;
height:40px;
color: #FFF;
margin-top:0px;
}
#menu ul li ul{
visibility: hidden;
background-image:none;
display:block;
left:4px;
line-height:25px;
background-color: #00F;
color: #000;
margin-top:19px;
/*二级导航放置方式*/
}
#menu ul li ul li a{
background-color: #00F;
background-image: none;
color: #FFF;
}
#menu ul li ul a:hover{
background-color:#FF0;
}
#menu ul li:hover ul {
visibility:visible;
position:relative;
background-color: #FFF;
/*二级导航放置方式*/
}
#logo {
position:absolute;
/*文字的放置*/
}
#word {
position: absolute;
top: 360px;
left: 156px;
font-size: 28px;
color: #CCC;
/*文字*/
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">北大概况
<ul>
<li>北大简历</li>
<li>现任领导</li>
<li>历任领导</li>
<li>组织机构</li>
<li>历史名人</li>
<li>信息公开</li>
<li>绿色校园</li>
</ul></a>
</li>
<li><a href="#">招生与资助</a></li>
<li><a href="#">院系设置</a></li>
<li><a href="#">教育教学</a></li>
<li><a href="#">科学研究</a></li>
<li><a href="#">合作交流</a></li>
<li><a href="#">校园生活</a></li>
</ul>
</div>
<div id="word"><span style=" background-color:rgba(0,0,0,0.6);">雾窗寒对瑶天暮，暮天遥对寒窗雾。</span></div><div id="logo"></div>
<div>
<img src="../吕康男网页部分/小雪.jpg" width="1380" height="460" />
</div>
</body>
</html>
