Div+CSS+JS树型菜单_html/css_WEB-ITnose

Div+CSS+JS树型菜单，可刷新


* { margin : 0 ; padding : 0 ; border : 0 ; }
body {
font-family : arial, 宋体, serif ;
font-size : 12px ;
}
#nav {
width : 180px ;
line-height : 24px ;
list-style-type : none ;
text-align : left ;
/* 定义整个ul菜单的行高和背景色 */
}

/* ==================一级目录=================== */
#nav a {
width : 160px ;
display : block ;
padding-left : 20px ;
/* Width(一定要)，否则下面的Li会变形 */
}

#nav li {
background : #CCC ; /* 一级目录的背景色 */
border-bottom : #FFF 1px solid ; /* 下面的一条白边 */
float : left ;
/* float：left,本不应该设置，但由于在Firefox不能正常显示
继承Nav的width,限制宽度，li自动向下延伸 */
}

#nav li a:hover {
background : #CC0000 ; /* 一级目录onMouseOver显示的背景色 */
}

#nav a:link {
color : #666 ; text-decoration : none ;
}
#nav a:visited {
color : #666 ; 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 : #EBEBEB ; /* 二级目录的背景色 */
}

#nav li ul a {
padding-left : 20px ;
width : 160px ;
/* 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 : #CC0000 ;
/* 二级onmouseover的字体颜色、背景色 */
}

/* ============================== */
#nav li:hover ul {
left : auto ;
}
#nav li.sfhover ul {
left : auto ;
}
#content {
clear : left ;
}
#nav ul.collapsed {
display : none ;
}
-->

#PARENT {
width : 300px ;
padding-left : 20px ;
}

我的网站

[url]www.netany.net[/url]


我的帐务

支付
网上支付
登记汇款
在线招领
历史帐务


网站管理

登录
管理
管理
管理


网站管理

登录
管理
管理
管理

查看更多关于Div+CSS+JS树型菜单_html/css_WEB-ITnose的详细内容...