分類導航

首先看一下大體的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">
                ![](img/1.png)
            </div>
        </div>
    </li>
    <li>
     ...
    </li>
</ul>
                

li是左側(cè)的一級菜單，div.submenu是相應的二級菜單，正常情況下是隱藏的。

我添加了一個lihover的類，當鼠標經(jīng)過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 = "";
        };
    }
};

完整代碼：https://github.com/qiaoer2017/Demo2