新新新新手请教简单网页代码问题

代码如下：
********************************************************************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {margin:0;padding:0}
#main {margin:100px;width:420px;font-size:15px;}
  #nav {width:420px;height:25px;border-left:2px solid #000000;border-top:2px solid #000000;}
  #nav ul {list-style:none;margin:0;padding:0;}
  #nav li {float:left;width:58px;text-align:center;height:25px;line-height:25px;background:#999999;display:block;
border-right:2px solid #000000;border-bottom:2px solid #000000;}
  #xianshi {width:420px;height:150px;float:left;background:#999999;}
  #xs {margin:35px;height:80px;background:red;}
#nav li a {text-decoration:none;color:#FFFFFF;}
#nav li a:hover {color:#FF0000;text-decoration:underline;border-bottom-style:none;}
</style>
<script type="text/javascript">
function changer1 () {document.getElementById("xs").style.background="red"}
function changeo1 () {document.getElementById("xs").style.background="orange"}
function changey1 () {document.getElementById("xs").style.background="yellow"}
function changeg1 () {document.getElementById("xs").style.background="green"}
function changeq1 () {document.getElementById("xs").style.background="#00FFFF"}
function changeb1 () {document.getElementById("xs").style.background="blue"}
function changez1 () {document.getElementById("xs").style.background="#FF00FF"}
</script>
</head><body>
<div id="main">
  <div id="nav">
  <ul>
  <li onmouseover="changer1()"><a href="#">菜单 红</a></li>
  <li onmouseover="changeo1()"><a href="#">菜单 橙</a></li>
  <li onmouseover="changey1()"><a href="#">菜单 黄</a></li>
  <li onmouseover="changeg1()"><a href="#">菜单 绿</a></li>
  <li onmouseover="changeq1()"><a href="#">菜单 青</a></li>
  <li onmouseover="changeb1()"><a href="#">菜单 蓝</a></li>
  <li onmouseover="changez1()"><a href="#">菜单 紫</a></li>
  </ul>
  </div>
  <div id="xianshi">
  <div id="xs">
  </div>
  </div>
</div>
</body>
</html>
**********************************************************************************************************
主要效果是我鼠标经过菜单时 菜单下边框消失 测试时菜单下边框不会变 请高手指教！！！！！！！！！另求树状菜单 就像我们论坛左边的菜单一样 有个加号 一点击子菜单就向下分布 加号变减号 再点子菜单又缩回去
我是新手 可以的话请提供简单点的代码 我好研究  
感谢各位了！！！！！！