二级下拉菜单
生命不息，折腾不止。今天在回访象牙塔的时候，发现了一篇好文章：大前端D4主题导航栏下拉菜单实现方法（链接失效）。解决了我使用 Optimus+ 以来的一个问题：无法使用自定义二级下拉菜单。在之前的文章里我提到过，若是弄个下拉菜单，以我的水平还得修改 css 好久，所以觉得麻烦当时就放弃了。不过，“机会就是给有准备的人”呐！偶然看到合适的文章，一下就觉得也许可行，而且就是修改 css 能搞定的，于是立马下手。哎，没文化真可怕。二话不说，贴代码（以象牙塔提供的代码为准进行了部分更改）：
.nav li li {
height: 29px;
float: left;
}
.nav li li a {
line-height: 29px !important;
}
.nav li ul {
position: absolute;
left: -999em;
width: 150px;
margin: 0;
border-width: 1px 1px 0px;
z-index: 999;
}
.nav li ul li {
border-top: 0;
border-bottom: 1px solid #000000;
border-right: none;
border-left: none;
}
.nav li ul li a {
background: #484848;
width: 100px;
height:29px;
color: #CCC !important;
font-weight: normal;
opacity: .80;
filter: alpha(opacity=80);
text-shadow: 0px 1px 0px #000 !important;
}
.nav li ul li a:hover {
text-shadow: 0px 1px 0px #fff !important;
}
.nav li ul li a:hover {
background: #333333;
color: #fff !important;
text-shadow: 0px 1px 0px #000 !important;
text-decoration: none;
}
.nav li ul ul {
margin: -31px 0px 0px 150px;
}
.nav li ul ul li a {}
.nav li ul li ul li a {}
.nav li:hover,
.nav li.hover {
position: static;
}
.nav li:hover ul ul,
.nav li:hover ul ul ul,
.nav li:hover ul ul ul ul {
left: -999em;
}
.nav li:hover ul,
.nav li li:hover ul,
.nav li li li:hover ul,
.nav li li li li:hover ul {
left: auto;
}
在此基础上，总结之前在 wopus 看到的问答：二级导航条怎么实现，顺便把 jquery 下拉效果也加入进来，供需要的童鞋参考。建议在 footer.php 中的 jquery 文件之后加入：
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.menu li').hover(function() {
$('ul', this).slideDown(300)
},
function() {
$('ul', this).slideUp(300)
});
});
</script>
现在发现的问题是，jquery 下拉效果在第一次悬停时并不会表现出来。若是悬停过一次，再次悬停的时候便有效果。不知道是不是跟加载速度有关。有需要的童鞋可以直接在本博 navibar 测试二级下拉菜单。