【css效果】实现简单的下拉菜单
16lz
2021-04-07
效果图：
下拉菜单距离顶部有一定的距离，为了避免鼠标滑到二级菜单的过程中，二级菜单意外收起。可以在二级菜单的外部在包裹一层div，然后二级菜单距离外部包裹的div有一定的距离即可。
.right { display: flex; align-items: center; i { margin: 0 12px; font-style: normal; } .tj, .fbsj { position: relative; span { color: #333; font-size: 16px; cursor: pointer; } &:hover .submenu{ display: block; } // 二级菜单包裹层 .submenu{ display: none; position: absolute; top: 100%; right: 0; z-index: 99; } ul { width: 92px; background-color: #ffffff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); border-radius: 4px; margin-top: 10px; //距离父div高度 li{ text-align: center; height: 36px; line-height: 36px; font-size: #999; cursor: pointer; &:hover{ background-color: #f1f1f1; color: #333; } } } }}©著作权归作者所有：来自51CTO博客作者wx605879fdc8dae的原创作品，如需转载，请注明出处，否则将追究法律责任
更多相关文章
- 三级菜单和购物车
- 手把手教你实现vue下拉菜单组件
- 4-20ma模拟量转无线wifi采集传输0-10v模拟量输入输出远距离免布
- redis中的 geospatial（地理位置）使用
- 练习2-6 计算物体自由下落的距离 (5分)
- 后台四 菜单列表
- 后台一 搭建项目
- VUE---路由菜单Icon自定义的实现
- 2021-03-10：一个数组上共有 N 个点，序号为0的点是起点位置，序号为N-