单击纯 CSS 时关闭下拉菜单

Question

我有一个带有下拉菜单和使用纯 css 的子菜单的菜单栏。我的问题是当我单击下拉菜单或子菜单时如何关闭/折叠下拉菜单。this 是我制作的示例

这是html

<div id="headermenu">
    <ul >
        <li id=""><a href="#">menu1</a></li>
        <li id=""><a href="#">menu2</a>
            <ul class="">
                <li><a href="#">submenu1</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                        <li><a href="#">submenu.3</a></li>
                        <li><a href="#">submenu.4</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu2</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                        <li><a href="#">submenu.3</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu3</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu4</a></li>
                <li><a href="#">submenu5</a></li>
                <li><a href="#">submenu6</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                        <li><a href="#">submenu.3</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu7</a></li>
                <li><a href="#">submenu8</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>           
        <li id=""><a href="#">menu3</a>
            <ul>
                <li><a href="#">submenu1</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu2</a></li>
            </ul>
        </li>
        <li id="menutourists"><a href="#">menu4</a>
            <ul>
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
                <li><a href="#">submenu4</a></li>
                <li><a href="#">submenu5</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu6</a></li>
            </ul>
        </li>
        <li id="menuresidents"><a href="#">menu5</a>
            <ul>
                <li><a href="#">submenu1</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                        <li><a href="#">submenu.3</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
                <li><a href="#">submenu4</a></li>
            </ul>
        </li>
    </ul>   
</div>

这是css

#headermenu{
    width: 90%;
    height: 20%;
    margin-right:5%;
    margin-left:5%;
    margin-bottom: .5%;
}
#headermenu ul ul {
    display: none;
}
#headermenu ul li:hover > ul {
    display: block;
}
#headermenu ul{
    padding:0; 
    margin:0; 
    white-space:nowrap;
    list-style: none;
    position: relative;
    display: inline-table;
}
#headermenu ul li {
    width:100px;
    height:45px;
    float:left;
    left:0;
    text-decoration:none;
    text-align:center;
    font-family:century gothic;
    background-color:#fef3e2;
}
#headermenu ul li:hover {
    background: #feaa38;
}
#headermenu ul li:hover a {
    color: #ffffff;
}
#headermenu ul li a {
    color:#feaa38;
    display: block;
    text-decoration: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}   
#headermenu ul ul {
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}
#headermenu ul ul li {
    float: none; 
    background: #b0c7bd;
    position: relative;
}
#headermenu ul ul li:hover {
    background: #aea7a0;
}
#headermenu ul ul li a {
    color: #ffffff;
}   
#headermenu ul ul li a:hover {
    background: #aea7a0;
}   
#headermenu ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}       

Answer 1

添加这个 (Demo)

 #headermenu:active ul ul *{
        display:none;
    }

Answer 2

我认为这是不可能的，为此您应该使用 javascript。某些动作的 CSS 并不是最好的解决方案。