前天gu1dai发的无限右弹的菜单--〉横向版（）

代码<SCRIPT LANGUAGE="JavaScript">
<!--
// JavaScript Document
startList = function(rootObj) {
var navRoot,i=0;  //var 声明则变量就为局部变量了，彼此不影响，递归就没问题了。
if(rootObj == '' || rootObj == null)rootObj=navitree;
try{
navRoot = rootObj;
if(navRoot==null){alert('TREE null a wrong accoured');}
else 
{
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
if(node.childNodes.length>2){
//决定给LI套上哪个样式开始，子节点大于2个，说明有子菜单，子节点为A 、#text、UL
outclass="outbg";
node.onmouseover=function() 
{   
this.className = "overbg";
//info.value = this.outerHTML;
}
node.onmouseout=function() 
{
this.className= "outbg";
}
}
else{  //子节点数小于等于2个，说明无子菜单，子节点为：A 、#text.
outclass = "out"
node.onmouseover=function() 
{   
this.className = "over";
}
node.onmouseout=function() 
{
this.className= outclass;
}
}//决定给LI套上哪个样式结束.如果有子菜单UL，则选择有箭头的样式，否则，选择无箭头的样式。
node.className = outclass;
}//判断节点是否为LI结束
//递归给li赋予鼠标动作
startList(node);
}//for end
}
}//try end
catch(e){
alert("error by catch throw");
}//catch end
}//</startList>
window.onload = startList;//-->
</SCRIPT>
<style>
BODY { FONT: 11px verdana }
pre { FONT: 12px verdana }
/*这是定义id 为navitree的ul样式*/
UL#navitree{ 
PADDING : 0px; MARGIN: 0px; width:100% ;
BORDER:1px solid #008;
list-style:disc inside ;
}UL#navitree  LI.overbg {
background:#eeeeee no-repeat top right;
color:white;
}
UL#navitree  LI.outbg {
background:#eeeeee no-repeat top right;
color:white;
}
/*这一句绝不能少,这是定义id 为navitree下的所有ul，包括ul的ul*/
UL#navitree UL{
BORDER-left:1px solid #008;BORDER-top:1px solid #008;BORDER-right:1px solid #008;BORDER-bottom:1px solid #008;
PADDING : 0px; MARGIN: 0px;
}
/*定义id 为 navitree 的 UL 下的所有LI*/
UL#navitree LI {
float:left;
width:80px; padding:0px;MARGIN: 0px; position:relative;
}
/*初始化 id 为 navitree 的 UL 下的所有LI css样式为outbg时 */
UL#navitree LI.outbg UL{  DISPLAY:none; }/*定义a link的样式*/
UL#navitree LI A { PADDING: 3px;  DISPLAY: block;  COLOR: #777;  TEXT-DECORATION: none;   }
UL#navitree LI A:hover {  COLOR: white }/*下面这一句异常关键,不可少*/
.navitree LI UL {
DISPLAY: none; position:absolute;
}
/*这一句定义class为navitree的UL-〉LI->UL->LI->UL,这一句和上一句都是用来定义子UL的显示位置的。*/
.navitree LI UL LI UL{
DISPLAY: block; position:absolute;left:80px;top:0px;
}
/*定义有子菜单的LI鼠标移过，移出的样式*/UL#navitree  LI UL LI.overbg {
background:url(D://usr//www//html//mambog/modules/navicategory/arr.gif) #eeeeee no-repeat top right;
color:white;
}UL#navitree  LI UL LI.outbg {background:url(D://usr//www//html//mambog/modules/navicategory/arr.gif) #dddddd no-repeat top right;
color:white;
}
LI.overbg UL{DISPLAY: block;}
LI.outbg UL{DISPLAY:none;}/*定义无子菜单的LI鼠标移过，移出的样式*/
LI.over {background:#eeeeee;}
LI.out {background:white;}</style><UL id="navitree" class="navitree">
<LI><a href=#>生活</a>
<UL><LI><a href=#>主要菜系</a>
<UL><LI><a href=#>论坛</a><LI><a href=#>菜系简介</a>
<UL><LI><a href=#>简介之间</a>
<UL><LI><a href=#>Latest</a>
<UL><LI><a href=#>好5级</a></UL></UL></UL></UL><LI><a href=#>hello</a><LI><a href=#>二手交易</a><LI><a href=#>生活小常识</a><LI><a href=#>通信/互联网</a><LI><a href=#>干洗</a><LI><a href=#>家政</a><LI><a href=#>美容/美发</a><LI><a href=#>运动</a><LI><a href=#>健康</a><LI><a href=#>餐饮</a>
<UL><LI><a href=#>中国饮食文化</a></UL></UL></LI>
<LI><a href=#>购物</a>
<UL><LI><a href=#>婚纱、服装定做</a><LI><a href=#>本地特产</a><LI><a href=#>花卉（插花、盆景）</a><LI><a href=#>CD、VCD、乐器</a><LI><a href=#>玩具、兴趣、游戏</a><LI><a href=#>妇幼儿童用品</a><LI><a href=#>室内装饰</a><LI><a href=#>日用品</a><LI><a href=#>电脑、家电</a><LI><a href=#>食品、饮料</a><LI><a href=#>服装、服饰、鞋</a><LI><a href=#>专卖店</a><LI><a href=#>综合商场</a></UL></LI><LI><a href=#>居住</a>
<UL><LI><a href=#>宾馆</a><LI><a href=#>租房、买房</a></UL></LI><LI><a href=#>出行</a>
<UL><LI><a href=#>旅行</a><LI><a href=#>车船飞机票</a><LI><a href=#>交通</a></UL></LI><LI><a href=#>娱乐</a>
<UL><LI><a href=#>其他（摄影、雕刻.....）</a><LI><a href=#>演出信息</a><LI><a href=#>休闲场所</a><LI><a href=#>酒吧</a><LI><a href=#>书籍</a><LI><a href=#>电影</a><LI><a href=#>音乐</a></UL></LI><LI><a href=#>服务</a>
<UL><LI><a href=#>快递</a><LI><a href=#>订票</a><LI><a href=#>办公用品</a><LI><a href=#>天气</a></UL></LI><LI><a href=#>招聘</a>
<UL><LI><a href=#>求职</a><LI><a href=#>企业招聘</a>
<UL><LI><a href=#>兼职</a></UL></UL></LI><LI><a href=#>新闻</a>
<UL><LI><a href=#>热点访谈</a><LI><a href=#>热点新闻</a><LI><a href=#>本地新闻</a></UL></LI><LI><a href=#>育儿</a>
<UL><LI><a href=#>兴趣班</a><LI><a href=#>公园</a><LI><a href=#>游乐园</a><LI><a href=#>儿童用品</a><LI><a href=#>学校</a><LI><a href=#>托儿所</a></UL></LI><LI><a href=#>学习/培训</a>
<UL><LI><a href=#>意大利学习</a>
<UL><LI><a href=#>top 学习培训</a></UL><a href=#>文化交流</a><LI><a href=#>家教</a><LI><a href=#>英文培训</a><LI><a href=#>中文讲座</a></UL></LI></UL><PRE>
<h2>横向菜单</h2>
我改了下，这个带图片箭头。图片箭头在css里定义，统一放到一个文件里了。
bug都补上了，样式也作了小小的修改。由于我对css的了解比较浅薄，只能尽力改到简洁了。
需要注意，如果你把三个文件分开来，那么，确保所有文件编码格式统一。如：都为gb2312，或都为utf-8注意：由于原先的菜单样式定义不符合局部使用的要求，会影响整个页面的样式定义，所以我修改了。
修改后的样式符合局部使用的需要。其定义不会影响整个页面的样式定义。
整个UL容器需要像这样定义：
&lt;UL id="<font color=red>navitree</font>" class="navitree"&gt;
此处的id号<font color=red>navitree</font>需要和javascript中的id号对应在这里
if(rootObj == '' || rootObj == null)rootObj= <font color=red>navitree</font>;<!--如果你不调试,去掉js里的这一句。info.value = this.outerHTML;去掉&lt;textarea&gt;-->
</PRE> 
<!--<TEXTAREA NAME="info" ROWS="20" COLS="80"></TEXTAREA>-->