下拉菜单是网页中常见的组件之一,而子菜单则是下拉菜单的一个重要组成部分。在CSS中,实现子菜单选中状态的显示,可以应用伪类选择器。下面我们就来介绍一下如何使用CSS来实现子菜单的选中状态显示。 首先,
<ul class="dropdown-menu"> <li>菜单项1</li> <li class="has-submenu">菜单项2 <ul class="submenu"> <li>子菜单项1</li> <li>子菜单项2</li> <li>子菜单项3</li> </ul> </li> <li>菜单项3</li> <li>菜单项4</li> </ul>
.dropdown-menu li:hover { background-color: #ccc; } .has-submenu .submenu { display: none; } .has-submenu:hover .submenu { display: block; position: absolute; background-color: #fff; border: 1px solid #ccc; } .has-submenu .submenu li:hover { background-color: #eee; } .has-submenu:active .submenu { display: block; position: absolute; background-color: #fff; border: 1px solid #ccc; } .has-submenu:active .submenu li:hover { background-color: #eee; }
粉丝
0
关注
0
收藏
0