本文实例讲述了JS CSS实现树形菜单二级树形菜单。分享给大家供大家参考。具体如下：

这是一款二级树形菜单示例：CSS树菜单，非常漂亮的树形菜单，用在网站右侧比较合适。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-treemenu-2l-menu-codes/

具体代码如下：

！doctype html public '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' lang=' GB 2312 '标题二级树形菜单示例：CSS TreeMenu/title style type=' text/CSS ' media=' all ' a，a:visited { color: # 333文本装饰：无；} a : hover { color : # f60 } body，td {font:13px '日内瓦','宋体，'阿里亚尔'，' Helvetica '，无衬线；}ul，li { margin:0划水：0;列表式：无；}h1、h2、h3、h4、h5、h6 { margin:0划水：0;} h1 { padd :5 pxcolor : # 900 font :16 px粗体'日内瓦','宋体，'阿里亚尔'，' Helvetica '，无衬线；}h1小号{ font-size :11 px字体粗细：正常；color: # 660}。TreeWrap { width:200px}。MenuBox .标题框a .MenuBox .tit box a :已访问。MenuBox2 .titBox a，MenuBox2 .标题框a :已访问{左边距：10 px左填充left :40 pxcolor : # 003 font-size :12 px；显示：块；}.MenuBox .tit box H3 a {背景： URL(images/ico _ folder _ open。gif)无重复0-40%；}.MenuBox .titBox h3 .FST a {背景： URL(images/ico _ folder _ open _ FST。gif)否-重复0 40%;}.MenuBox .titBox h3 .lst a { background : URL(images/ico _ folder _ open _ lst。gif)否-重复0 40%;}.MenuBox2 .tit box H3 a {背景： URL(images/ico _ folder。gif)无重复0-40%；}.MenuBox2 .titBox h3 .FST a {背景： URL(images/ico _ folder _ FST。gif)无重复0-40%；}.MenuBox2 .titBox h3 .Lst a线高：250%;背景： URL(图片/图标_退出。gif)否-重复0 0;}.MenuBox2 .txtBox { display:none}。MenuBox .txt盒ul Li {填充-左侧：65 px线高：150%;}.MenuBox .txtBox .num { color: # e00}。MenuBox .txt box ul { background : URL(images/line _ y . gif)repeat-y 16px 0；}.MenuBox .txt box ul Li {背景： URL(图片/t . gif)no-repeat 28px 50%；}.MenuBox .txtBox ul li .背景：网址(图像/t _ lst。gif)无重复28px 50%；}/style脚本类型=' text/JavaScript '！-function exchclsname(Obj，NameA，NameB){ var Obj=document。getelementbyid(Obj)？文件。getelementbyid(Obj): Obj；物体。类名=Obj。类名==NameA？名称名称B:NameA}函数show Menu(INo){ exch lsname(' Menu _ ' INo '，' MenuBox '，' MenuBox 2 ')；}-/script/headdy h1css树菜单斯摩尔比枫岩@ IECN。net/small/h1 div class=' TreeWrap ' div class=' MenuBox ' id=' Menu _ 0 ' div class=' TitBox ' H3类=' Fst ' a href=' JavaScript : show Menu(0)；'同事/a/H3/div class=' TxtBox ' ul lia href=' # ' Dodo/a/Li lia href=' # '小春/a/li lia href='# '小林/a/li lia href='# '小龙/a/li li class='Lst'a href='# '枫岩/a/li /ul/div/div！-MenuBox-div class=' MenuBox 2 ' id=' Menu _ 1 ' div class=' Titbox ' h3a href=' JavaScript : show Menu(1)；'客户/a/H3/div class=' TxtBox ' ul lia href=' # ' Dodo/a/Li lia href=' # '小春/a/li lia href='# '小林/a/li lia href='# '小龙/a/li li class='Lst'a href='# '枫岩/a/li /ul/div/div！-MenuBox-div class=' MenuBox 2 ' id=' Menu _ 2 ' div class=' Titbox ' h3a href=' JavaScript : show Menu(2)；'朋友/a/H3/div class=' TxtBox ' ul lia href=' # ' Dodo/a/Li lia href=' # '小春/a/li lia href='# '小林/a/li lia href='# '小龙/a/li li class='Lst'a href='# '枫岩/a/li /ul/div/div！-MenuBox-div class=' MenuBox 2 ' id=' Menu _ 3 ' div class=' Titbox ' h3a href=' JavaScript : show Menu(3)；'家人/a/H3/div class=' TxtBox ' ul lia href=' # ' Dodo/a/Li lia href=' # '小春/a/li lia href='# '小林/a/li lia href='# '小龙/a/li li class='Lst'a href='# '枫岩/a/li /ul/div/div！-MenuBox-div class=' MenuBox 2 ' div class=' TitBox ' H3 class=' Lst ' a href=' # '退出系统/a/h3/div/div！- MenuBox - /div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。