导航按钮实现.docx

导航按钮实现.docx

《导航按钮实现.docx》由会员分享，可在线阅读，更多相关《导航按钮实现.docx（11页珍藏版）》请在冰点文库上搜索。

导航按钮实现

--

body{

font-family:

arial,宋体,serif;

font-size:

12px;

background-color:

#B3D4FF;

}

*{margin:

0px;padding:

0px;}

#nav{

width:

174px;

line-height:

24px;

list-style-type:

none;

text-align:

left;

/*定义整个ul菜单的行高和背景色*/

}

/*==================一级目录===================*/

#nava{

width:

174px;

display:

block;

padding-left:

20px;

/*Width（一定要），否则下面的Li会变形*/

}

#navli{

border-bottom:

#FFF1pxsolid;/*下面的一条白边*/

float:

left;

background-color:

#FECFD6;

color:

#333333;

font-weight:

bold;

background:

url（../images/dot_o.gif）no-repeat8px8px;

}

#navlia:

hover{

background:

#F7A868;/*一级目录onMouseOver显示的背景色*/

}

#nava:

link{

color:

#333333;text-decoration:

none;

}

#nava:

visited{

color:

#333333;text-decoration:

none;

}

#nava:

hover{

color:

#FFF;text-decoration:

none;font-weight:

bold;

}

/*==================二级目录===================*/

#navliul{

list-style:

none;

text-align:

left;

}

#navliulli{

background:

#F5F5F5;/*二级目录的背景色*/

font-weight:

normal;

}

#navliula{

padding-left:

20px;

width:

174px;

/*padding-left二级目录中文字向右移动，但Width必须重新设置=（总宽度-padding-left）*/

}

/*下面是二级目录的链接样式*/

#navliula:

link{

color:

#666;text-decoration:

none;

}

#navliula:

visited{

color:

#666;text-decoration:

none;

}

#navliula:

hover{

color:

#333333;

text-decoration:

none;

font-weight:

normal;

background:

#F0F1FD;

/*二级onmouseover的字体颜色、背景色*/

}

/*==============================*/

#navli:

hoverul{

left:

auto;

}

#navli.sfhoverul{

left:

auto;

}

#content{

clear:

left;

}

#navul.collapsed{

display:

none;

}

#PARENT{

width:

174px;

}

-->

#CCE3F5;color:

#FFF;">