改写用在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;
}

没有评论:
发表评论