<!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>
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
ul{
width: 50px;
height: 80px;
display: inline;
}
li{
line-height: 20px;
width: 70px;
height: 20px;
border: 2px solid gray;
padding: 0 30px
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>学校概况</li>
<li>管理机构</li>
<li>系部设置</li>
<li>教育教学</li>
<li>科学研究</li>
<li>招生就业</li>
<li>学生工作</li>
<li>党建思政</li>
<li>团学动态</li>
<li>团干培训</li>
<li>数字校园</li>
<li>RSS</li>
</ul>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
$("ul li").mouseover(function(){
$(this).css({backgroundColor:"red"})
})
$("ul li").mouseout(function(){
$(this).css({backgroundColor:""})
})
</script>
</html>
