css 实现三级联动菜单
昨天因为项目中想要把二级联动菜单改成三级联动菜单，所以我就单独写了一个tab导航栏，用纯css的方式实现的三级联动。一开始我想着可以用js实现，但是js的hover事件和mouseenter,mouseover,mouseleave,mouseout事件都会有一个问题，就是当鼠标移出区域块儿的时候，我们希望弹出来的二级菜单和三级菜单可能不会像我们希望的显示隐藏。所以，我们可以用css3的伪类元素实现。
大家可以去我的gitHub上去看demo,我把网址贴一下：https://github.com/dreamITGirl/projectStudy/blob/master/html/%E5%88%86%E7%BA%A7%E8%81%94%E5%8A%A8%E8%8F%9C%E5%8D%95%E6%A0%8F.html
顺便再把效果图贴一下：
代码如下
DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/><title>菜单栏title><style>html, body, ul, li {margin: 0;padding: 0;font-family: "微软雅黑", Helvetica, Arial, sans-serif;}ul, li {list-style: none;}.top {background: #4db3a4;height: 34px;width: 100%;padding: 0 10%;box-sizing: border-box;}.main-nav {display: flex;line-height: 34px;}.two-nav {background: #4db3a4;position: relative;
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！