多级导航样式规范
图例:
红的标注 是必须每次模版都加的
蓝色的是根据情况来修改属性值
加粗的文字需加到模版里面的
<!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;}