本文实例讲述了JS+CSS简单树形菜单实现方法。分享给大家供大家参考。具体如下：
这是一款不错的CSS树形菜单，树状列表，当然不全是CSS实现，部分功能还使用了Javascript代码进行配合，删减了修饰用的菜单图片，大家用的时候自己图片加进去，IMG标签大部分都预留了出来，稍懂Html语法的朋友很容易就看懂的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/
具体代码如下：
树状列表 *{margin:0px;padding:0px;} A:link{color: #000000; TEXT-DECORATION: none;} A:visited {COLOR: #000000; TEXT-DECORATION: none} A:active {COLOR: #3333ff; TEXT-DECORATION: none} A:hover {COLOR: #ff0000; TEXT-DECORATION: none} .panel{ BACKGROUND: #DDE4EA; COLOR:#654125;} ul { list-style: none; margin: 0; padding: 0; } img{ border:0px; width:16px; height:16px; } #menu{ margin-top: 0px; } .U1 { background: #FFFFFF; border-bottom:1px #9D9D9D solid; } .L1 a:link, .L1 a:visited{ color: #476074; background: url(""); font-size:9pt; display: block; text-decoration: none; height: 24px; } .L1 a:link span, .L1 a:visited span{ background: url("") no-repeat left; padding-left: 15px; height:24px; vertical-align:middle; padding:7px 0px 0px 16px; cursor:pointer; width:100%; } .L1 a:hover{ color: #000000; font-weight:bold; background: url(""); background-position: 0 -24px; } .L1 a:link.active, .L1 a:hover.active, .L1 a:active.active, .L1 a:visited.active{ background: url(""); background-position: 0 -24px; } .L1 a:link.active span, .L1 a:hover.active span, .L1 a:active.active span, .L1 a:visited.active span{ color: #000000; font-weight:bold; background: url("") no-repeat left; } .L21 a:link, .L21 a:visited, .L22 a:link, .L22 a:visited, .L3 a:link, .L3 a:visited{ color: #444659; background: none; height: 24px; font-size:9pt; display: block; text-decoration: none; padding-left: 13px; background: none; } .L21 a:link span, .L21 a:visited span, .L22 a:link span, .L22 a:visited span, .L3 a:link span, .L3 a:visited span{ vertical-align:middle; padding:7px 0px 0px 16px; background: url("") no-repeat left center; cursor:pointer; width:100%; } .L22 a:link span, .L22 a:visited span, .L3 a:link span, .L3 a:visited span{ background:none; } .L21 a:hover, .L22 a:hover, .L3 a:hover{ background: url("") no-repeat top left; font-weight:bold; } .L3 a:link span, .L3 a:visited span{ padding:7px 0px 0px 26px; } .L4 a:link span, .L4 a:visited span{ padding:7px 0px 0px 36px; } .L21 a:link.active, .L21 a:hover.active, .L21 a:active.active, .L21 a:visited.active{ background: none; } .L21 a:link.active span, .L21 a:hover.active span, .L21 a:active.active span, .L21 a:visited.active span{ color: #000000; font-weight:bold; background: url("") no-repeat left center; } .L22 a:link.active, .L22 a:hover.active, .L22 a:active.active, .L22 a:visited.active, .L3 a:link.active, .L3 a:hover.active, .L3 a:active.active, .L3 a:visited.active{ background: url("") no-repeat left; background-position: 0 -24px; } .L22 a:link.active span, .L22 a:hover.active span, .L22 a:active.active span, .L22 a:visited.active span, .L3 a:link.active span, .L3 a:hover.active span, .L3 a:active.active span, .L3 a:visited.active span{ color: #FFFFFF; font-weight:bold; background: none; } .Ls{ text-align:right; padding-top:4px; height:20px; font-size:9pt; } .setting:link, .setting:visited{ text-decoration: underline; display:block; }
希望本文所述对大家的Javascript程序设计有所帮助。
