Dom——下拉菜单

下拉菜单

案例展示

效果如上图所示，当鼠标经过最上面的内容时出现下拉菜单，鼠标移开则隐藏。当鼠标移动到下拉菜单的选项时该选项背景颜色改变，如下图所示。

核心思想

1. 整体考察鼠标事件，难点在于如何设置单一菜单实现下拉效果，而不是全部菜单一起下拉
2. 上方内容用ul和li，每个li内包含超链接a；下拉菜单部分也是用ul和li。
3. 为了能够让每个li都有鼠标经过事件，需要为所有li遍历获取，注册事件。
4. 鼠标经过上方时，下拉菜单显示；鼠标离开上方和下拉菜单时隐藏。

代码

html部分

<ul class="nav">
    <li>
        <a href="#">首页</a>
        <ul>
            <li><a href="#">精品</a></li>
            <li><a href="#">优惠</a></li>
            <li><a href="#"