下拉菜单显示在主菜单的上面怎么做
要求子菜单显示在主菜单的上面，而不是下面，用这段代码一直是显示在下面。
要怎么做才能在上面显示啊。
<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>
</div>
</span>
<span><img alt="" src="../images/verticalline1.png" width="2px" height="16px" /></span>
<span><a href="conews.asp"><strong>投资项目</strong></a>
<div>
<span><a href="NewsClass.asp?BigClass=行业新闻">行业新闻</a></span>
<span><a href="NewsClass.asp?BigClass=特别推荐">特别推荐</a></span>
<span><a href="NewsClass.asp?BigClass=公司动态">公司动态</a></span>
</div>
</span>
<span><img alt="" src="../images/verticalline1.png" width="2px" height="16px" /></span>
<span><a href="Product.asp"><strong>管理团队</strong></a>
<div>
<span><a href="ProductShow.asp?ID=136">数据采集服务 </a></span>
<span><a href="ProductShow.asp?ID=137">数据维护服务</a></span>
<span><a href="ProductShow.asp?ID=138">客户定制服务</a></span>
</div>
</span>
<span><img alt="" src="../images/verticalline1.png" width="2px" height="16px" /></span>
<span><a href="consultative.asp"><strong>投资理念</strong></a>
<div>
<span><a href="consultativepage.ASP?Title=合作机构">合作机构</a></span>
<span><a href="join.asp">合作申请</a></span>
</div>
</span>
<span><img alt="" src="../images/verticalline1.png" width="2px" height="16px" /></span>
<span><a href="service.asp"><strong>联系我们</strong></a>
<div>
<span><a href="servicepage.ASP?Title=常见问题">常见问题</a></span>
<span><a href="feedback.asp">意见反馈</a></span>
</div>
</span>
<span><img alt="" src="../images/verticalline1.png" width="2px" height="16px" /></span>
<span><a href="#"><img alt="" src="../images/searchbar.png" width="150px" height="16px" /></a></span>
</div>
[解决办法]
粗略的看了一下，在 span div 的样式中添加一个 top:-36px; 试试..
