分類導(dǎo)航
首先看一下大體的HTML結(jié)構(gòu)：
<div class="toptitle"><a href="#">全部商品分類</a></div>
<ul class="topmenu">
<li><a href="#">營養(yǎng)保健</a><span class="occlusion"></span>
<div class="submenu">
<div class="cat-part-col1">
<dl>
<dt><a href="#">音像</a></dt>
<dd>
<a href="#">音樂</a> <a href="#">影視</a> <a href="#">教育音像</a> <a href="#">游戲</a>
</dd>
</dl>
...
</div>
<div class="cat-part-col2">
</div>
</div>
</li>
<li>
...
</li>
</ul>
li是左側(cè)的一級(jí)菜單，div.submenu是相應(yīng)的二級(jí)菜單，正常情況下是隱藏的麻献。
我添加了一個(gè)lihover的類，當(dāng)鼠標(biāo)經(jīng)過li時(shí)猜扮，為當(dāng)前的li添加lihover類勉吻，使相應(yīng)的二級(jí)菜單顯示出來。
.topmenu .lihover {
border: 1px solid #ddd;
border-left: 0;
border-right: 0;
padding: 0 0 0 10px;
background: #ffffff;
-webkit-box-shadow: 0 1px 1px #efefef, 0 -1px 1px #efefef;
-moz-box-shadow: 0 1px 1px #efefef, 0 -1px 1px #efefef;
box-shadow: 0 1px 1px #efefef, 0 -1px 1px #efefef;
}
.topmenu .lihover .submenu, .topmenu .lihover .occlusion {
display: block;
}
其中occlusion類是一個(gè)span標(biāo)簽旅赢，為的是遮擋住二級(jí)菜單懸浮層左邊的邊框齿桃。
JS代碼：
window.onload = function () {
var menuItems = document.getElementsByClassName("topmenu")[0].getElementsByTagName("li");
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].onmouseover = function () {
this.className = "lihover";
};
menuItems[i].onmouseout = function (event) {
this.className = "";
};
}
};
