sizheng.org

花開未央

纯CSS打造WordPress二级菜单导航栏

折腾了一个下午,终于用纯CSS实现了WordPress 下拉菜单导航栏,撒花!( ̄▽ ̄)o∠※PAN!=.:*:'☆.:*:'★':*

嗯,因为是为自己blog定制的,所以呢,目前只支持2层深度。

效果图

分享一下我的代码啦~

嗯,重点是display的运用。

PHP代码:
[code type=php]

[/code]

CSS样式代码:
[code type=css]
#navigation {height:38px;background:#666666;}
.menu li{
float:left;
text-transform:capitalize;
padding:8px 10px;
background:#666666;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
}
.menu li a{padding:8px 10px;color:#ccc;font-family:微软雅黑;font-size:15px;}
.menu li a:hover{border-bottom:2px solid #339999;color:#eb4640;font-weight:bold;}
.menu li ul{display:none;}
.menu li:hover ul{display:block;}[/code]