纯CSS三级菜单，兼容IE6横向、下拉级联代码，鼠标放在主菜单对应菜单项上，会向下展开二级菜单，二级菜单会继续展开第三级的子菜单，菜单没有过多的美化，如果你要使用的话，可以自己继续美化吧。 示例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>CSS级联菜单</title><br /> <style type="text/css"><br /> * { margin:0; padding:0; list-style:none;}<br /> .c_subNav { width:150px; }<br /> .c_subNav table { width:100%; border-collapse:collapse;}<br /> .c_subNav a { text-decoration:none; color:#333;}<br /> .c_subNav a:hover { color:#f60;}<br /> .c_subNav ul ul { position:absolute; visibility:hidden; top:25px;}<br /> .c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;}<br /> .c_subNav a.li { position:relative;}<br /> .c_subNav li .option { display:block; line-height:15px; padding:5px 5px 5px 25px; background:no-repeat 5px 4px; cursor:pointer; font:12px Verdana; zoom:1; background:url() no-repeat;}<br /> .c_subNav li .option:hover { color:#f60; background-color:#ffa;}<br /> .c_subNav li .option span { display:block; padding-right:15px; background:url() no-repeat right 0;}<br /> .c_subNav li .option:hover span { background-position:right -15px;}<br /> .c_subNav .li:hover { z-index:2; background:transparent;}<br /> .c_subNav .li:hover ul { visibility:visible;}<br /> .c_subNav .li:hover ul ul { visibility:hidden;}<br /> .c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;}<br /> .c_subNav .li:hover li { border-bottom:none;}<br /> .c_subNav .li:hover li .option { padding:2px 5px; background:transparent;}<br /> .c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;}<br /> .c_subNav .li:hover li .option:hover span { background-position:right -30px;}<br /> .c_subNav .li:hover .li:hover ul { visibility:visible; left:145px; top:-2px;}<br /> /*---图标差异---*/<br /> .c_subNav .charges .option { background-position:4px -45px;}<br /> .c_subNav .biz .option { background-position:4px -70px;}<br /> .c_subNav .change .option { background-position:4px -95px;}<br /> .c_subNav .score .option { background-position:4px -120px;}<br /> .c_subNav .server .option { background-position:4px -145px;}<br /> .c_subNav .edit .option { background-position:4px -170px;}<br /> .c_subNav .sms .option { background-position:4px -195px;}<br /> </style><br /> </head><br /> <body><br /> <div class="c_subNav"><br /> <ul><br /> <li class="li charges"><br /> <!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]--><br /> <a href="#nogo" class="option"><span>烈火网</span></a><br /> <ul><br /> <li class="li"><br /> <!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]--><br /> <a href="#nogo" class="option"><span>烈火下载</span></a><br /> <ul><br /> <li class="li"><a href="#nogo" class="option">asp</a></li><br /> <li class="li"><a href="#nogo" class="option">jsp</a></li><br /> <li class="li"><a href="#nogo" class="option">vb</a></li><br /> <li class="li"><a href="#nogo" class="option">css</a></li><br /> <li class="li"><a href="#nogo" class="option">jquery</a></li><br /> <li class="li"><a href="#nogo" class="option">c#</a></li><br /> </ul><br /> <!--[if IE 6]></td></tr></table></a><![endif]--><br /> </li><br /> <li class="li"><br /> <!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]--><br /> <a href="#nogo" class="option"><span>烈火论坛</span></a><br /> <ul><br /> <li class="li"><a href="#nogo" class="option">电脑</a></li><br /> <li class="li"><a href="#nogo" class="option">手机</a></li><br /> <li class="li"><a href="#nogo" class="option">电子书</a></li><br /> </ul><br /> <!--[if IE 6]></td></tr></table></a><![endif]--><br /> </li><br /> <li class="li"><br /> <!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]--><br /> <a href="#nogo" class="option"><span>烈火工具</span></a><br /> <ul><br /> <li class="li"><a href="#nogo" class="option">PR查询</a></li><br /> <li class="li"><a href="#nogo" class="option">网站排名</a></li><br /> </ul><br /> <!--[if IE 6]></td></tr></table></a><![endif]--><br /> </li><br /> </ul><br /> <!--[if IE 6]></td></tr></table></a><![endif]--><br /> </li><br /> </ul><br /> </div><br /> </body><br /> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>提示：可修改后代码再运行! 文章导航 jQuery多级折叠(树形)菜单，动态展开和收缩一款普通的Tab网页选项卡切换，js+css代码
