div+css建造导航下拉菜单

方式/步调

1. 1

   1.最终预览结果：

2. 2

   2.起首看如下代码：

3. 3

   3.预览结果：

4. 4

   4.新增如下代码：

5. 5

   5.预览结果如下：

6. 6

   6. 发现样式乱了，这是因为新增的li担当了原本的 Float：left;

   新增代码如下：

7. 7

   7. 预览结果图：

8. 8

   8.此刻把下拉列表的布景图片去失落，并增添Hover样式

9. 9

   9.预览结果如下：

10. 10

    10.此刻根基实现了下拉结果，接下来就是要实现当鼠标移动到一级菜单上的时辰，显示二级菜单，当鼠标移开一级菜单的时辰，埋没二级菜单，这需要CSS和JS双重来节制。

    看如下代码：

11. 11

    11.代码诠释：

            起首埋没二级菜单的Ul  #menu ul li ul{ display:none;  width:154px;}

            设置一个一级菜单li的listshow 下的二级菜单的样式为显示：#menu ul li.listshow ul{ display:block;}

            如许就给了二级菜单两个状况，默认环境下埋没，当一级菜单有样式listshow的时辰，二级菜单显示。

            至于这两种状况的切换就是JS代码的节制。

            JS代码解读（从上到下每行解读）：

            起首界说一个函数：menuFix

            函数内部界说变量 sfEles 为获取的一级菜单项。

            因为一级菜单有多个，所以轮回每个菜单，sfEles[i]代表轮回到的每个菜单项，例如 java菜单

            每个菜单项设置两个状况onmou搜索引擎优化ver onmou搜索引擎优化ut 即鼠标移动到菜单上和鼠标移开的两个状况。

            在每个状况中设置菜单项（即一级菜单li）的class.

12. 12

    12.最终结果：

    END