WordPress企业主题定制/开发/优化

经典的菜单效果CSS范例

首页 » CSS » 经典的菜单效果CSS范例

经典的菜单效果CSS范例

用以下CSS,可以实现菜单项常用效果。例如hover时,可以与link时显示不同的背景图片、背景色、字体、字体颜色等等。也就是说这个CSS是通用的,你可以根据他进行拓展应用。
<style>

#topnav {
margin:0px;
margin-top:0px;
padding:0px;
padding-left:0px;
padding-top:5px;
clear:both;
width:100%;
background:#000000; border-bottom:1px solid #202020;
height:20px;
overflow:auto;
}
#topnav ul { padding:0px; margin:0px;}
#topnav ul li {
height:14px;
float:left;
list-style:none;

}
#topnav ul li a {
display:block;
color:#fff;
font-size: 11px;
line-height: 11px;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0;
padding-left: 8px;
border-right:1px solid #555;
text-decoration:none
}
#topnav ul li a:hover { color:#ff9900;}
#topnav ul li.current_page_item a {
color:#ff9900;
}

</style>

使用方法:

<div id="topnav" >
<ul>
<li><a href="#">PALV MENU01</a></li>
<li><a href="#">PALV MENU02</a></li>
<li><a href="#">PALV MENU03</a></li>
<li><a href="#">PALV MENU04</a></li>
<li><a href="#">PALV MENU05</a></li>
<li><a href="#" style="border-right:0px;">PALV MENU06</a></li>
</ul>
</div>

分类与标签:

CSS

相关项目

  • WordPress外贸企业主题

  • 最近更新

  • 热门标签