css 横向多级菜单 |手机端和pc端 css设置

/*横向多级菜单的CSS样式*/
.nav-menu{
display: flex; /*设为弹性布局*/
justify-content: center; /*让菜单在中间显示*/
}
.nav-menu>li{
position: relative; /*开启定位*/
list-style:none; /*去除默认列表样式*/
padding: 0 20px; /*设定左右间距*/
}
.nav-menu>li:hover>.sub-menu{
display: block; /*在li:hover状态下，将子菜单设为display:block 显示状态*/
}
.sub-menu{
position: absolute;
top: 100%;
left: 0;
display: none; /*初始状态下，子菜单设为display:none 隐藏状态*/
list-style: none;
margin: 0;
padding: 0;
}
.sub-menu>li{
white-space: nowrap; /*防止文字换行*/
}
.sub-menu .sub-menu{
top:0;
left:100%; /*子菜单出现在父菜单的右侧*/
}

通过以上代码，大家可以很轻松地实现一个横向多级菜单，在此基础上，大家可以根据需求进行样式定制，比如添加动画效果、设置字体、背景颜色等等。