CSS三级子菜单是网站设计中常用的一种导航菜单效果,它可以展示更加丰富的导航信息,让网站用户更容易地找到所需要的内容。 要实现CSS三级子菜单,需要合理运用CSS选择器的嵌套和样式继承的特性。 首先,
.nav-container { list-style: none; } <br> .menu-item { display: inline-block; position: relative; padding: 10px; } <br> .menu-item:hover { background-color: #EEE; } <br> .menu-item > .sub-menu-1 { display: none; position: absolute; top: 40px; left: 0; } <br> .menu-item:hover > .sub-menu-1 { display: block; } <br> .sub-menu-1 > .menu-item { position: relative; } <br> .sub-menu-1 > .menu-item > .sub-menu-2 { display: none; position: absolute; top: -10px; left: 100%; } <br> .sub-menu-1 > .menu-item:hover > .sub-menu-2 { display: block; } <br> .sub-menu-2 > .menu-item { position: relative; } <br> .sub-menu-2 > .menu-item > .sub-menu-3 { display: none; position: absolute; top: 0; left: 100%; } <br> .sub-menu-2 > .menu-item:hover > .sub-menu-3 { display: block; }
粉丝
0
关注
0
收藏
0