改写的用在wordpress分类的纯CSS下拉框代码

改写用在wordpress分类的纯CSS下拉框。
<table width=”160″ border=”0″ cellspacing=”0″ cellpadding=”0″>
  <tr>
    <td><div>
<div>
<div>
<div onmouseover=this.className=’over’ onmouseout=this.className=’normal’>
<a href='<?php bloginfo(‘url’); ?>’>category</a>
  <ul>
    <li><?php wp_list_categories(‘orderby=name&show_count=0&use_desc_for_title=0&title_li=&depth=0&hide_empty=0’); ?></li>
  </ul>
</div>
  </div>
   </div>
    </div>
 <td>
  </tr>
</table>
style.css 的CSS 代码。
.CategoryMouseover .normal{
 position:relative;
 z-index:9;
 color:#000;
 line-height: 30px;
 text-align: center;
}
.CategoryMouseover .over{
 position:relative;
 z-index:998;
 color:#000;
 background:#f2f2f2;
 line-height: 30px;
 text-align: center;
}
.CategoryMouseover .normal a,
.CategoryMouseover .over a{
 font-weight:700;
 display:block;
 border-bottom:1px dotted #ccc;
 height:22px;
 
}
.CategoryMouseover .normal ul{
 display:none;
}
.CategoryMouseover .over ul{
 display:block;
 background-color:#fff;
 position:absolute;
 top:0;
 right:-80px;
 background:#fff;
 z-index:10;
 text-align:left;
 border-bottom:none;
}
.CategoryMouseover .over ul li a{
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 display:block;
 width:130px;
 background:#f2f2f2;
 color:#000;
 padding-left:6px;
}
.CategoryMouseover .over ul li a:hover{
 background:#666666;
 color:#fff;
 
}

没有评论:

发表评论

Follow Us

FOLLOW US

Blog Archive

Comments

Blogger 提供支持.

Search This Blog

Tags

header ads