漂亮的css菜单导航实例

三月 19, 2010 by zeze · Leave a Comment   

漂亮的css菜单导航实例,

效果

css菜单导航

xhtml

<div id=”menucase”>
<ul id=”saturday”>
<li><a href=”http://www.web7d.com.cn” title=”">Home</a></li>
<li><a href=”" title=”">About Us</a></li>
<li><a href=”" title=”">Services</a></li>
<li><a href=”" title=”">Our Work</a></li>
<li><a href=”" title=”">Contact Us</a></li>
</ul>
</div>

css

ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url(“http://www.web7d.com.cn/wp-content/demo/images/bgOFF.gif”) repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
ul#saturday li{display:block;float:left;margin:0;pading:0;}
ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url(“http://www.web7d.com.cn/wp-content/demo/images/bgDIVIDER.gif”) no-repeat top right;}
ul#saturday li a:hover{background:transparent url(“http://www.web7d.com.cn/wp-content/demo/images/bgHOVER.gif”) no-repeat top right;}
ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url(“http://www.web7d.com.cn/wp-content/demo/images/bgON.gif”) no-repeat top right;}

预览:http://www.web7d.com.cn/wp-content/demo/css-menu.html
来源:漂亮的css菜单导航实例 | web启点

相关文章


About zeze

发布评论