CSS UL LI用作菜单栏

浏览数：15 / 时间：2015年06月09日 
<style type="text/css">
.menu_h,.menu_v,.menu_h li,.menu_v li{
 margin:0;
 padding:0;
 line-height:21px;
 font-size:12px;
 list-style-type:none;
}
.menu_h a,.menu_v a{
 display:block;
 line-height:21px;
 padding:0 10px;
}
.menu_h li{
 float:left;
 background-color:#eee;
}
.menu_v li{
 float:none;
}
.sub_menu_off .menu_v{
 display:none;
}
.sub_menu_on .menu_v{
 display:block;
}
</style>
<div class="navi">
<ul class="menu_h">
 <li onmouseover="this.className=‘sub_menu_on‘;" onmouseout="this.className=‘sub_menu_off‘;" class="sub_menu_off">
  <a href="#">111</a>
  <ul class="menu_v">
   <li><a href="#">111</a></li>
   <li><a href="#">111</a></li>
   <li><a href="#">111</a></li>
  </ul>
 </li>
 <li onmouseover="this.className=‘sub_menu_on‘;" onmouseout="this.className=‘sub_menu_off‘;" class="sub_menu_off">
  <a href="#">222</a>
  <ul class="menu_v">
   <li><a href="#">222</a></li>
   <li><a href="#">222</a></li>
   <li><a href="#">222</a></li>
  </ul>
 </li>
 <li onmouseover="this.className=‘sub_menu_on‘;" onmouseout="this.className=‘sub_menu_off‘;" class="sub_menu_off">
  <a href="#">333</a>
  <ul class="menu_v">
   <li><a href="#">333</a></li>
   <li><a href="#">333</a></li>
   <li><a href="#">333</a></li>
  </ul>
 </li>
</ul>
</div>

 css利用ul li标签构建菜单栏。

CSS UL LI用作菜单栏,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： c color t http java it class a 代码 l display c color t http java it class a 代码 l display

相关文章

随机文章

您可能还喜欢

您可能还喜欢