最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯Css实现下拉菜单的简单例子
时间:2022-06-25 09:27:50 编辑:袖梨 来源:一聚教程网
大家可能会经常用到hover这属性,用hover实现鼠标经过的颜色改变等等之类,其实hover非常强大。
分享一个鼠标经过,弹出下拉菜单的小技巧;
当我们建好一个列表:
- javascript:;” target=”_blank” title=””>一级菜单
- 一级菜单
- 一级菜单
我们在一级菜单下再建立一个ul列表,并将这个列表显示隐藏:
.slideWrap .slide {position: absolute; display: none;}
注意这个时候需要用定位去放置二级菜单的位置;
然后:
.slideWrap:hover slide{display:block;} /**鼠标经过 将slide元素 显示**/
slide跟在hover后面,注意必须是在子元素,鼠标经过父元素才能实现这个效果。
怎么样?这个小技巧很简单和实用吧!
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21