一级导航hover时显示二级导航总结

和大多数一级导航显示，二级导航在一级导航hove时显示时一样，既可以使用CSS来实现也可以使用JS来实现。

1、CSS实现： HTML结构上将每个二级导航放在对应的一级导航 li 标记内部。使用CSS在 li 标签:hover时显示二级导航。

　　优点：结构清晰、实现方便、可以减少不必要的标签和JS代码。

　　缺点：只是单纯的显示隐藏，不够灵活，不能设置更多动画效果，当然可以使用CSS3动画来实现动画效果。

　　　　　li标签上的：hover IE6不兼容，需要额外补丁。

 

2、JS实现：

　　A、HTML结构上将一级导航和二级导航作为兄弟元素一一对应，使用JS遍历一级标签元素和二级标签元素，

　　　  使用onmouseover/onmouseout将对应i一级菜单ndex下标的二级菜单显示和隐藏。

　　优点：HTML上将每个块结构分离，方便修改和管理。

 

　　B、HTML结构上和CSS实现一样，将二级菜单作为一级菜单子元素。在一级菜单li标签上添加hover类来控制二级菜单显示和隐藏。

　　优点：JS现实方便，也没有使用CSS实现时的兼容性问题。

 

总结：在不考虑兼容IE6的情况下使用CSS实现会更加简便和高效。使用JS实现更灵活，兼容性也更好。