幫朋友做個(gè)小導(dǎo)航時(shí)用到了下拉菜單，話(huà)說(shuō)WordPress3.0以上版本的”wp_nav_menu（）”真是好用，加上主題自定義菜單的設(shè)置簡(jiǎn)直可以說(shuō)是完美的網(wǎng)站導(dǎo)航。

涉及到下拉菜單制作的方法最核心的還是鼠標(biāo)移動(dòng)到上面的處理。下面是調(diào)用wp_nav_menu（）函數(shù)后的HTML結(jié)構(gòu)（做解釋用）：

<div class="menu-菜單名-container">

<ul class="menu" id="menu-菜單名">

<li class="menu-tiem"><a href="#">菜單項(xiàng)目1</a>

<ul class="sub-menu">

<li><a href="#">子菜單項(xiàng)目1-1</a></li>

<li><a href="#">子菜單項(xiàng)目1-2</a></li>

…

</ul>

</li>

<li><a href="#">菜單項(xiàng)目2</a></li>

</ul>

</div>

這是一種很經(jīng)典很優(yōu)雅的導(dǎo)航HTML代碼，在IE6以上以及標(biāo)準(zhǔn)瀏覽器中要實(shí)現(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以上以及標(biāo)準(zhǔn)瀏覽器中表現(xiàn)的很完美，原因是IE6這種老瀏覽器還不支持任何標(biāo)簽的偽類(lèi)屬性，即 htmlTag:hover。所以為了兼容我們又不得不用JS來(lái)實(shí)現(xiàn)（純CSS亦可）。我大概寫(xiě)了一段JS可以勉強(qiáng)達(dá)到效果，但不知道為什么在IE中切換 菜單時(shí)會(huì)有閃動(dòng)的感覺(jué)，這個(gè)得求教JS高手了哈。

<!–[if lt IE 7]>

<script type="text/javascript">

//<![CDATA[

/*導(dǎo)航聯(lián)動(dòng)效果*/

(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]—>

問(wèn)題在于W3C對(duì)onmouseout事件處理方法不是很理想，微軟IE支持的onmouseleave方法確可以正常工作。

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄