CSS透明导航菜单代码
CSS透明导航菜单代码
<div id="menuContainer">
<ul id="menu">
<li id="home" class="first"><a href="index.html"><b>Home</b></a></li>
<li id="single"><a href="single.html"><b>Single Level</b></a></li>
<li id="dropdown"><a href="dropdown.html"><b>Dropdown</b></a></li>
<li id="dropline"><a href="dropline.html"><b>Dropline</b></a></li>
<li id="flyout"><a href="flyout.html"><b>Flyout</b></a></li>
<li id="support"><a href="support.html"><b>Support</b></a></li>
<li id="contact" class="last"><a href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
<style>
#menuContainer {padding:0; margin:0; list-style:none; width:798px; height:180px; position:absolute; right:0; top:0;}
#menu {padding:0; margin:0; list-style:none; width:798px; height:180px; background:url(/blog/upload/image/20091219073647.png);}
* html #menu {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blog/upload/image/20091219073647.png', sizingMethod='scale');
}
#menu li {float:left; margin-top:130px; width:114px; height:50px; position:relative;}
#menu li a {display:block; width:113px; height:50px; background:url(/blog/upload/image/20091219073723.png); border-right:1px solid #888; text-decoration:none; color:#ccc; font-family:verdana, sans-serif; font-size:11px;}
#menu li.last a {border:0;}
* html #menu li a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blog/upload/image/20091219073723.png', sizingMethod='scale');
}
#menu li a b {display:block; width:113px; height:50px; line-height:48px; text-transform:lowercase; text-align:center;}
.home #menu li#home a,
.single #menu li#single a,
.dropdown #menu li#dropdown a,
.dropline #menu li#dropline a,
.flyout #menu li#flyout a,
.support #menu li#support a,
.contact #menu li#contact a,
#menu li a:hover {white-space:nowrap; color:#fff; cursor:pointer;}
.home #menu li#home a b,
.single #menu li#single a b,
.dropdown #menu li#dropdown a b,
.dropline #menu li#dropline a b,
.flyout #menu li#flyout a b,
.support #menu li#support a b,
.contact #menu li#contact a b,
#menu li a:hover b {background:url(http://www.111cn.net/blog/upload/image/20091219073740.gif);}
</style>
编后记
采编:ZOUDECAO(微信/QQ:82075451) E_mail: zdco@qq.com
感谢作者辛苦原创!部分文章未能与原作者联系,如侵权请联系我们删除。转载请注明出处!如果觉得本文对你有启发,可以点击一键转发,分享给我们身边喜欢的朋友。因为分享,所以快乐。
本文来自 德艺志 转载请注明;
本文地址:http://www.zoudecao.net/post/1134.html。