DIV+CSS+JS二级树型菜单，展开后刷新无影响-CSS布局实例_html/css_WEB-ITn

DIV+CSS+JS二级树型菜单，展开后刷新无影响

body { font-family: arial, 宋体, serif; font-size:12px; }
* { margin:0px; padding:0px; }
#nav { width:174px; line-height: 24px; list-style-type: none; text-align:left; /*定义整个ul菜单的行高和背景色*/
}
/*==================一级目录===================*/
#nav a { width: 174px; display: block; padding-left:20px; /*Width(一定要)，否则下面的Li会变形*/
}
#nav li { border-bottom:#FFF 1px solid; /*下面的一条白边*/ float:left; background-color: #FECFD6; color:#DD1336; font-weight:bold; }
#nav li a:hover { background:#F85B78; /*一级目录onMouseOver显示的背景色*/ }
#nav a:link { color:#DD1336; text-decoration:none; }
#nav a:visited { color:#DD1336; text-decoration:none; }
#nav a:hover { color:#FFF; text-decoration:none; font-weight:bold; }
/*==================二级目录===================*/
#nav li ul { list-style:none; text-align:left; }
#nav li ul li { background:#ffecef; /*二级目录的背景色*/ font-weight:normal; }
#nav li ul a { padding-left:20px; width:174px;/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}
/*下面是二级目录的链接样式*/
#nav li ul a:link { color:#666; text-decoration:none; }
#nav li ul a:visited { color:#666; text-decoration:none; }
#nav li ul a:hover { color:#F3F3F3; text-decoration:none; font-weight:normal; background:#FFAA1C;/* 二级onmouseover的字体颜色、背景色*/
}
/*==============================*/
#nav li:hover ul { left: auto; }
#nav li.sfhover ul { left: auto; }
#content { clear: left; }
#nav ul.collapsed { display: none; }
-->
#PARENT { width:174px; }

菜单一

菜单一
菜单一
菜单一
菜单一
菜单一
菜单一
菜单一
菜单一
菜单一
菜单一
菜单一
菜单一


菜单二

菜单二
菜单二
菜单二
菜单二
菜单二


菜单三

菜单三
菜单三
菜单三
菜单三
菜单三
菜单三


菜单四

菜单四
菜单四
菜单四
菜单四
菜单四
菜单四


菜单五

菜单五
菜单五
菜单五
菜单五
菜单五
菜单五
菜单五
菜单五
菜单五
菜单五
菜单五
菜单五


菜单六

菜单六
菜单六
菜单六


菜单七

菜单七
菜单七


菜单八

菜单八
菜单八
菜单八


菜单九

菜单九
菜单九
菜单九


菜单十

菜单十

查看更多关于DIV+CSS+JS二级树型菜单，展开后刷新无影响-CSS布局实例_html/css_WEB-ITn的详细内容...