翻转下拉导航菜单用腻了,想换一个简单的,不过大多数都是jquery,纯css比较少,jq就jq吧,其实现在可以自己写了,但还是伸手来得方便。无意中找的时候就发现了一个简单的直接不用jq了。CSS如下(由于是CSS3,所以不兼容IE,IE另外写):

.menu{height:40px;width:505px;background:#4c4e5a;background:-webkit-linear-gradient(top,#4c4e5a 0,#2c2d33 100%);background:-moz-linear-gradient(top,#4c4e5a 0,#2c2d33 100%);background:-o-linear-gradient(top,#4c4e5a 0,#2c2d33 100%);background:-ms-linear-gradient(top,#4c4e5a 0,#2c2d33 100%);background:linear-gradient(top,#4c4e5a 0,#2c2d33 100%);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.menu li{position:relative;list-style:none;float:left;display:block;height:40px}
.menu li a{display:block;padding:0 14px;margin:6px 0;line-height:28px;text-decoration:none;border-left:1px solid#393942;border-right:1px solid#4f5058;font-family:Helvetica,Arial,sans-serif;font-weight:bold;font-size:13px;color:#f3f3f3;text-shadow:1px 1px 1px rgba(0,0,0,.6);-webkit-transition:color.2s ease-in-out;-moz-transition:color.2s ease-in-out;-o-transition:color.2s ease-in-out;-ms-transition:color.2s ease-in-out;transition:color.2s ease-in-out}
.menu li:first-child a{border-left:0}
.menu li:last-child a{border-right:0}
.menu li:hover>a{color:#8fde62}
.menu ul{position:absolute;top:40px;left:0;opacity:0;background:#1f2024;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-transition:opacity.25s ease.1s;-moz-transition:opacity.25s ease.1s;-o-transition:opacity.25s ease.1s;-ms-transition:opacity.25s ease.1s;transition:opacity.25s ease.1s}
.menu li:hover>ul{opacity:1}
.menu ul li{height:0;overflow:hidden;padding:0;-webkit-transition:height.25s ease.1s;-moz-transition:height.25s ease.1s;-o-transition:height.25s ease.1s;-ms-transition:height.25s ease.1s;transition:height.25s ease.1s}
.menu li:hover>ul li{height:36px;overflow:visible;padding:0}
.menu ul li a{width:100px;padding:4px 0 4px 40px;margin:0;border:0;border-bottom:1px solid#353539}
.menu ul li:last-child a{border:0}

重点就那么几句,其他都是装饰。 看结构就知道了,直接套wp的导航,不支持三级菜单。