多级导航样式规范

多级导航样式规范

图例:

红的标注 是必须每次模版都加的

蓝色的是根据情况来修改属性值  

加粗的文字需加到模版里面的


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

w3c规范必须要 否则 导航在ie下显示 一列


导航父级属性 需加上text-align:left;


#sudy-menu-h li li {width:150px;}/*加这个解决ie7 的 每条下拉栏目不对齐 */

#sudy-menu-h{height: 32px; /*1.背景*/ /*background:#0750BF;*/}

#sudy-menu-h a{display:block; padding:6px 34px 6px 34px; white-space:nowrap;}  一级导航的文字间距

#sudy-menu-h a{text-decoration:none; /*2.一级导航颜色*/ color:#fff;

#sudy-menu-h>ul>li:hover>a{/*3.一级导航鼠标移入背景和颜色*/ background:#C0E9E3; color:#333;}

/*4.二级导航的高度及行高*/

#sudy-menu-h>ul>li>a{line-height:22px;height:22px;}

/*4.二级导航鼠标移入背景颜色*/

#sudy-menu-h li li a:hover{background:#eee;}

/*5.二级导航字体颜色*/

#sudy-menu-h li li a span{color:#333;}

/*6.二级导航鼠标移入字体颜色*/

#sudy-menu-h li li a:hover span{color:#444;}

/*6.有子项时,箭头样式*/

#sudy-menu-h li li a.parent span{background:url(images/pointer.gif) no-repeat right 9px; _background-position:right 10px;}

/*7.二级导航背景颜色*/

#sudy-menu-h li div{background:#8BAF4F;}

/*8.三级导航背景颜色*/

#sudy-menu-h ul li div ul li div{background:#A9C95E;}


三级导航整体属性  

/** <fix for ie6> */

#sudy-menu-h div div{_margin-top:-25px; _background:#393939;}

#sudy-menu-h li li li{_border:1px solid #393939;}

#sudy-menu-h div div div{_background:#292929;}

#sudy-menu-h li li li li{_border:1px solid #292929;}