Zblog metro主题修改为下拉式导航的方法-教程、积累-涂涂研版

今天一博友回复说自己的博客的metro主题不能修改为下拉式导航的问题，实际上可以修改，查看代码可以知道：原模板只是在div的框上加上一个div框，只需要更改css代码就可以实现了。

导航代码为：

<div class="nevbarbg">
  <div class="navbar">
    <ul>
      <#CACHE_INCLUDE_NAVBAR#>
    </ul>
  </div>
</div>

（不用修改）

方法如下：

把css导航部分代码：

.nevbarbg { width:100%; height:40px; background: #A3D0F2;}

.navbar { width:980px; height:40px; line-height:40px; margin:0 auto; 
background: #A3D0F2; overflow:hidden;}

.navbar ul li { float:left; font-size:16px; padding:0 20px 0 0;}

.navbar ul li a { display:block; float:left; padding:0 10px;
 color: #333333;}

.navbar ul li a:hover{ background:#FFFFFF; color:#5EAAE4;} 

.navbar ul li a.on{background:#5EAAE4;color:#fff;}

更换为：

.nevbarbg { width:100%; height:40px; background: #A3D0F2;}

.navbar {background: #A3D0F2;height:40px;width:980px; position:relative;
 z-index:10000;font-weight:normal;margin:0 auto;}

.navbar  ul{height:40px;width:760px;float:left;}

.navbar  a{padding:0px 0px; display:block;color:#f8f8f8;
font-weight:normal;}

.navbar  a:hover{background:#e36c09  ;text-decoration:none;
 color: #FFFFFF;}

.navbar  li {position: relative;height: 100%; width:102px;
 text-align:center;

 font:'Microsoft Yahei';float: left; line-height:40px;} 

.navbar  ul ul {visibility:hidden;padding:0px 0px;width: auto;
white-space:nowrap;

font: 14px  'Microsoft Yahei',Verdana, Arial, Helvetica, sans-serif;
 background-color:#FFFFFF;} 

.navbar  ul li:hover ul,

.navbar  ul a:hover ul{visibility:visible; margin:auto; } 

.navbar  ul ul li a{width:102px;margin:0;padding:0px 0px;
color:#f8f8f8;

font-weight:normal;line-height:40px;background: #A3D0F2;}

就可以了，保存，尝试下试试吧。

注：上面的代码中颜色可以根据自己的喜好来修改。希望帮到你了。