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> 

`标签中，`class`属性`dropdown-menu`表示为下拉菜单设置公共样式，`class`属性`submenu`表示为子菜单设置单独的样式。
定义好基本的下拉菜单后，我们可以使用CSS为子菜单选中状态设置样式。我们可以使用伪类选择器`:hover`表示当鼠标悬浮在该菜单项上时的状态，使用伪类选择器`:active`表示当该菜单项被选中时的状态。
下面是完整的CSS代码：


 .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;
    } 


在上述代码中，针对不同的伪类选择器，我们设置了不同的样式。其中，当鼠标悬浮在菜单项上时（使用`:hover`伪类选择器），子菜单项的背景色为浅灰色（`background-color: #ccc;`）；当该菜单项被点击选中时（使用`:active`伪类选择器），子菜单项的背景色为浅灰色。同时，当鼠标悬浮在子菜单项上时，子菜单项的背景色为浅灰色（`.has-submenu .submenu li:hover {background-color: #eee;}`）。
综上所述，使用CSS来实现下拉菜单子菜单选中状态的显示，可以通过伪类选择器来设置不同的样式，代码简洁清晰，易于实现效果。