分类导航
首先看一下大体的HTML结构：
<div class="toptitle"><a href="#">全部商品分类</a></div>
<ul class="topmenu">
<li><a href="#">营养保健</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是左侧的一级菜单，div.submenu是相应的二级菜单，正常情况下是隐藏的。
我添加了一个lihover的类，当鼠标经过li时，为当前的li添加lihover类，使相应的二级菜单显示出来。
.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类是一个span标签，为的是遮挡住二级菜单悬浮层左边的边框。
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 = "";
};
}
};
