这个菜单怎么用高分100

yymzzl 2008-01-26 06:30:31

下面这个菜单我觉得不错但怎么应用啊怎么横向显示？再有如果用的话是不是直接加到<table>里就可以了？
如果2级里的内容需要从数据库里读出来那怎么改啊？谢谢大家了着急啊！

<script type="text/javascript">
startList.tag = 0;
function startList(rootObj)
{
var navRoot, i=0;
if(rootObj == '' || rootObj == null) rootObj=document.all.navitree;

try
{
navRoot = rootObj;
if(navRoot==null)
{
alert('null a wrong accoured');
}
else
{
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="out";
}
if(startList.tag==1)
{
node.className = "out";
}
startList(node);
}
else if (node.nodeName=="UL")
{
startList.tag = 1;
startList(node);
}
} //for end
}
} //try end
catch(e)
{
alert(e);
} //catch end
} //startList

window.onload = startList;
</script>

<style type="text/css">
body { font-size: 12px; font-family: 'Courier New';}.navitree
a { display: block; width: 100%; padding: 5px; margin: 1px; text-decoration: none; background: #ffe; color: #000;}
.navitree a:hover { background: #880; color: #fff;}
.navitree { width: 451px;}
.navitree, .navitree ul {
margin: 0px; padding: 0px;
border-bottom: 1px solid #ccc; border-right: #ccc 1px solid;
list-style-type: none;
}
.navitree li {
position: relative; width: 150px; padding: 0px; border-left: #ccc 1px solid;
border-top: #ccc 1px solid; float: left; background: #fff;
}
.navitree li ul li {
position: relative; width: 150px; padding: 0px; border: #ccc 1px solid; border-bottom: 0px;
border-right: 0px; float: left;
}
.navitree li ul {
display: none; position: absolute; left: -1px; top: 26px;
}
.navitree li ul li ul {
position: absolute; left: 149px; top: -1px;
/* Set 1px less than menu width */
}

li.over ul { display: block; visibility: visible;}
li.out ul { visibility: hidden; /* 比用 display:none 效率会高 */}
</style>
<BODY>
<ul id="navitree" class="navitree">
<li><a href="#">home</a></li>
<li>
<a href="#">about ></a>
<ul id="second">
<li><a href="#">history</a></li>
<li><a href="#">team</a></li>
<li><a href="#">offices</a></li>
</ul>
</li>

<li>
<a href="#">services ></a>
<ul>
<li>
<a href="#">web design ></a>
<ul>
<li><a href="#">web design - sub1</a></li>
<li><a href="#">web design - sub2</a></li>
<li><a href="#">web deisgn - sub3</a></li>
</ul>
</li>
</ul>

</li>

</ul>
</BODY>

...全文