下拉导航样式设计方法:
ul,a{
font-size: 20px; /*字体大小*/
background-color: #pink; /*背景颜色*/
color: #fff; /*字体颜色*/
width: 100px; /*宽度*/
text-align: center; /*水平位置*/
}
a{
display: block;
}
.plat{ display: none; }
.content:hover .plat{ display: block; clear: both; }
----------例:---------------
.dh_nav{background-color:#00549d;}
.dh_nav ul{overflow:hidden;}
.dh_nav li{float:left;}
.dh_nav li a{display:block; _float:left; padding:0 20px; height:45px; line-height:45px; font-size:14px; color:#fff; text-decoration:none; font-family:microsoft yahei;}
.dh_nav li a.navHome{padding:0 19px;}
.dh_nav li a.navCur , .dh_nav li a:hover{background-color:#00b834;}
.dh_nav .cur a,.nav li a:hover{background-color:#00b834;}
.dh_nav li.li_hot{position:relative;}
.dh_nav li.li_hot i{position:absolute; right:10px; top:4px; width:19px; height:12px; background:url(../images/hot_ico.png) no-repeat center;}
.sub{display: none; position: absolute; top: 190px; background: #00549d;}
.dh_nav li:hover .sub{ display: block; clear: both; }
副带 pbootcms 程序调用指定文件夹中的图片规则:
|