下拉菜单显示在主菜单的上面怎么做
要求子菜单显示在主菜单的上面,而不是下面,用这段代码一直是显示在下面。
要怎么做才能在上面显示啊。
<script language="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 == "SPAN") {
node.onmouseover = function () { this.className += " over"; }
node.onmouseout = function () { this.className = this.className.replace(" over", ""); }
}
}
}
}
window.onload = startList;
</script>
<style type="text/css">
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
div#nav{
height:200px;
}
span {
margin: 0px;
padding: 0px;
list-style: none;
width: 200px; /* Width of Menu Items */
position: relative;
border: 0px;
}
span div span {
border: 0px;
border-top: 0px;
}
span div {
position: absolute;
left: -1px;
display: none;
}
/* Styles for Menu Items */
div span a {
width: 100%;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
}
div span a:hover { color: #2E5B89; background: #DFF8FF; } /* Hover Styles */
span div span a { padding: 2px 5px; } /* Sub Menu Styles */
span:hover div, span.over div { display: inline; } /* The magic */
</style>
<div id="nav">
<span><img alt="" src="../images/verticalline1.png" width="2px" height="16px" /></span>
<span><a href="index.asp"><strong>首 页</strong></a></span>
<span><img alt="" src="../images/verticalline1.png" width="2px" height="16px" /></span>
<span><a href="ABOUTUS.ASP?Title=公司简介"><strong>关于我们</strong></a>
<div>
<span><a href="ABOUTUS.ASP?Title=公司简介">公司简介</a></span>
<span><a href="ABOUTUS.ASP?Title=发展愿景">发展愿景</a></span>
<span><a href="ABOUTUS.ASP?Title=发展历程">发展历程</a></span>
<span><a href="ABOUTUS.ASP?Title=组织架构">组织架构</a></span>
<span><a href="ABOUTUS.ASP?Title=主要负责人">主要负责人</a></span>
<span><a href="ABOUTUS.ASP?Title=资质证书">资质证书</a></span>
<span><a href="hrdemand.ASP">人才招聘</a></span>
<span><a href="http://mail.china-map.cn" target="_blank">企业邮局</a></span>