JS二级菜单不同实现方法分析【4种方法】

原创 黎云锐 教程 前端 123阅读 2018-12-22 17:30:01 举报

本文实例讲述了JS二级菜单不同实现方法。分享给大家供大家参考,具体如下:

之前面试的时候被问到过一次,后来,在笔试的时候又遇到了,为了长点记性,就决定把这个好好写写。

第一种:

第一种是采用css来控制的;主要采用float,和position,display,hover来完成的。具体看以参看后面的源代码。

第二种:

主要采用hover,和display来实现的。

第三种:

采用的是js来控制的,mouseover,mouseout来控制显示的。当然也利用了css.

第四种:

这种也是纯css的形式,主要利用display:inline-block;vertical-align:top;来实现的。如果不用vertical-align的话,就会导致一级菜单被二级菜单顶起来,使得上面无法对其,因此才需要设置。

每一种对应的源码如下:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复