下拉导航样式设计方法:
<ul class="content">
<a >服装</a>
<ul class="plat">
<li><a>外套</a></li>
<li><a>棉袄</a></li>
<li><a>裤子</a></li>
</ul>
</ul>
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; }
----------例:---------------
<!-- cb_导航栏 -->
<div class="dh_nav">
<ul class="container">
<li {pboot:if(0=='{sort:scode}')}class="cur"{/pboot:if}><a class="navHome" href="/">首页</a></li>
{pboot:nav}
<li {pboot:if('[nav:scode]'=='{sort:tcode}')}class="cur"{/pboot:if}> <a href="[nav:link]"><span>[nav:name]</span></a>
<dl class="sub">
{pboot:2nav parent=[nav:scode]}
<dd><a href="[2nav:link]">[2nav:name]</a></dd>
{/pboot:2nav}
</dl>
<span></span>
</li>
{/pboot:nav}
</ul>
</div>
<!-- 导航栏 css -->
<!-- 原 导航 css -->
.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;} <!-- 新增高亮 导航 css -->
.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;}
<!-- 新增下拉 导航 css -->
.sub{display: none; position: absolute; top: 190px; background: #00549d;}
.dh_nav li:hover .sub{ display: block; clear: both; }
副带 pbootcms 程序调用指定文件夹中的图片规则:
<img alt="[list:title]" src="/static/upload/cjtu/[list:visits len=2 more=''].jpg"/>