如何实现导航菜单栏中的二级下拉菜单?

我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片。

但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考。

1.仅使用html和css

Document   我们可以看到,这种方法是比较好的,它保证了结构与表现的完全分离。

2.使用javascript实现二级下拉菜单

Document   

3.用jQuery实现二级下拉菜单

Document

})
// 关键二:正确使用jQuey的语法完成行为。
$(function(){
$(".navmenu") .mouseout(function(){
$(this).children(“ul”).hide();
})

})

  

显然,使用jQuery是非常方便的。

最终的实现效果如下;

即当鼠标划过一级菜单时,会出现相应的二级菜单。

猜你喜欢

转载自blog.csdn.net/lzjgame/article/details/88924766