用css设置二级菜单的关键代码
具体代码：
<style type="text/css">
body {
font:normal 12px/1.5em "宋体", Verdana,Lucida, Arial, Helvetica, sans-serif;
} /* 设置页面中所有文字的样式 */
ul {
width:150px;
margin:0;
padding:0;
list-style:none;
border-bottom:1px solid #CCCCCC;
} /* 将无序列表ul的宽度设置为150px，并且去除内补丁和外补丁以及默认的列表修饰符，最后再添加边框 */
#nav li {
position: relative;
} /* 将列表li标签设置为相对定位方式，未添加top、left、bottom和right，只是起到子级定位的对象作用 */
#nav li ul {
display:none;
position:absolute;
left:149px;
top:0;
} /* 将列表li标签内的无序列表设置为绝对定位，相对于其父级顶部0px，靠左149px，并且暂时先隐藏不可见 */
ul li a {
display:block;
height:100%; /* 设置为块元素后使其的高度等于父级的高度 */
padding:5px;
text-decoration:none;
color:#777777;
border:1px solid #CCCCCC;
border-bottom:0 none;
background:#FFFFFF;
} /* 设置列表li标签内的锚点a标签为块并设置基本样式属性，最终显示的文字效果 */
#nav li:hover ul, #nav li.over ul {
display: block;
} /* 触发列表li标签的鼠标经过时显示其子级的无序列表ul标签中的内容，以及类名为over下的子级ul */
/* 针对IE6在触发弹出层时的错位解决方案 */
* html ul li {float:left;zoom:1;}
* html ul li a {zoom:1;}
</style>
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
-->
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们的故事</a></li>
<li><a href="#">我们的团队</a></li>
</ul>
</li>
<li><a href="#">我们的服务</a>
<ul>
<li><a href="#">网页设计</a></li>
<li><a href="#">页面制作</a></li>
<li><a href="#">程序开发</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">团队主力</a></li>
<li><a href="#">团队成员</a></li>
</ul>
</li>
</ul>
</body>
</html>
