CSS一级菜单可以移到二级,只需要一些简单的代码就可以实现。.navbar { display: flex; /* 使用flex布局 */ justify-content: center; /* 水平
CSS一级菜单可以移到二级,只需要一些简单的代码就可以实现。
.navbar { display: flex; /* 使用flex布局 */ justify-content: center; /* 水平居中 */ } .navbar>ul { list-style: none; /* 去除默认的列表样式 */ display: flex; /* 继承父元素的flex布局 */ } .navbar>ul>li { position: relative; /* 相对定位 */ } .navbar>ul>li:hover>ul { display: block; /* 鼠标移入显示子菜单 */ } .navbar>ul>li>ul { display: none; /* 初始状态下子菜单默认隐藏 */ position: absolute; /* 绝对定位 */ top: 100%; /* 子菜单的top要比父菜单的bottom多一个像素 */ left: 0; /* 与父元素左对齐 */ background-color: #fff; /* 子菜单背景色 */ padding: 0.5rem 0; /* 内部间距 */ } .navbar>ul>li>ul>li { width: 100%; /* 指定宽度 */ text-align: center; /* 居中对齐 */ }
上述代码用flex布局实现了水平居中,并利用相对定位和绝对定位实现了一级菜单移动到二级的效果,父元素的hover事件控制子元素的显示与隐藏,实现了二级菜单动态出现的效果。
粉丝
0
关注
0
收藏
0