WordPress3.0 无限级分类下拉菜单制作方法

帮朋友做个小导航时用到了下拉菜单，话说 WordPress3.0 以上版本的」wp_nav_menu（）」 真是好用，加上主题自定义菜单的设置简直可以说是完美的网站导航。

涉及到下拉菜单制作的方法最核心的还是鼠标移动到上面的处理。下面是调用 wp_nav_menu（） 函数后的 HTML 结构 （做解释用）：

<div >
<ul id="menu-菜单名">
<li ><a href="#"> 菜单项目 1</a>
<ul >
<li><a href="#"> 子菜单项目 1-1</a></li>
<li><a href="#"> 子菜单项目 1-2</a></li>
…
</ul>
</li>
<li><a href="#"> 菜单项目 2</a></li>
</ul>
</div>

这是一种很经典很优雅的导航 HTML 代码，在 IE6 以上以及标准浏览器中要实现下拉效果只用一句 CSS 就能搞定。比如下面的示例代码 （可自定义）：

.menu li a { float:left; height:35px; width:100px;/*菜单高度与宽度*/ line-height:35px; text-align:center; color：#ccc; text-align:center; }

.menu li { float:left; height:1%; background:#000; }

.menu-sjys-container { position:absolute; z-index:1000;}

.menu li ul li { clear:both; border-bottom:1px solid #333; border-right:none; }

.menu-item { position:relative; border-right:1px dotted #333; }

.menu-item:hover>.sub-menu{ display:block; /*下拉效果只用到这一段代码*/ }

.sub-menu { position:relative; left:1px; margin:0; z-index:101; display:none;/*一般情况下隐藏子菜单*/ }

.sub-menu ul.sub-menu { position:absolute; left:100px; top:0;}

上面的这两段代码在 IE6 以上以及标准浏览器中表现的很完美，原因是 IE6 这种老浏览器还不支持任何标签的伪类属性，即 htmlTag:hover 。所以为了兼容我们又不得不用 JS 来实现 （纯 CSS 亦可） 。我大概写了一段 JS 可以勉强达到效果，但不知道为什么在 IE 中切换菜单时会有闪动的感觉，这个得求教 JS 高手了哈。

<!–[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
/*导航联动效果*/
(function(){
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|s)"+searchClass+"(s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
function hoverSubMenu(node, flag) {
node.onmouseover = function() {
var subMenu = getElementsByClass("sub-menu", this)[0];
if (subMenu) {
subMenu.style.display = "block";
}
}
node.onmouseleave = function() {
var subMenu = getElementsByClass("sub-menu", this)[0];
if (subMenu) {
subMenu.style.display = "none";
}
}
}
var menuItems = getElementsByClass("menu-item");
for (var i=0; i<menuItems.length; i++) {
hoverSubMenu(menuItems[i], i);
}
})();
//]]>
</script>
<![endif]—>

问题在于 W3C 对 onmouseout 事件处理方法不是很理想，微软 IE 支持的 onmouseleave 方法确可以正常工作。