WordPress3.0無限級分類下拉菜單制作方法

    幫朋友做個小導航時用到了下拉菜單，話說WordPress3.0以上版本的”wp_nav_menu（）”真是好用，加上主題自定義菜單的設置簡直可以說是完美的網(wǎng)站導航。
    涉及到下拉菜單制作的方法最核心的還是鼠標移動到上面的處理。下面是調用wp_nav_menu（）函數(shù)后的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>
    這是一種很經(jīng)典很優(yōu)雅的導航HTML代碼，在IE6以上以及標準瀏覽器中要實現(xiàn)下拉效果只用一句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以上以及標準瀏覽器中表現(xiàn)的很完美，原因是IE6這種老瀏覽器還不支持任何標簽的偽類屬性，即 htmlTag:hover。所以為了兼容我們又不得不用JS來實現(xiàn)（純CSS亦可）。我大概寫了一段JS可以勉強達到效果，但不知道為什么在IE中切換 菜單時會有閃動的感覺，這個得求教JS高手了哈。
    <!–[if lt IE 7]>
    <script type="text/javascript">
    //<![CDATA[
    /*導航聯(lián)動效果*/
    (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方法確可以正常工作。