一聚教程网:一个值得你收藏的教程网站

热门教程

纯Css实现下拉菜单的简单例子

时间:2022-06-25 09:27:50 编辑:袖梨 来源:一聚教程网

大家可能会经常用到hover这属性,用hover实现鼠标经过的颜色改变等等之类,其实hover非常强大。

分享一个鼠标经过,弹出下拉菜单的小技巧;

当我们建好一个列表:

我们在一级菜单下再建立一个ul列表,并将这个列表显示隐藏:

.slideWrap .slide {position: absolute; display: none;}

注意这个时候需要用定位去放置二级菜单的位置;

然后:

.slideWrap:hover slide{display:block;}  /**鼠标经过 将slide元素 显示**/

slide跟在hover后面,注意必须是在子元素,鼠标经过父元素才能实现这个效果。

怎么样?这个小技巧很简单和实用吧!

热门栏目