Html 单击纯css关闭下拉菜单

我有一个带有下拉菜单和使用纯css的子菜单的菜单栏。我的问题是当我单击下拉菜单或子菜单时如何关闭/折叠下拉菜单。。这是我做的样品吗

这是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>

添加此（）

---

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

我的意思是让下拉菜单关闭，而不是隐藏所有内容。我想让菜单保留下来。你可以写下你对小提琴所做的更改吗？你能把它们放在答案中吗？你能为每个下拉菜单项添加点击提醒吗？#headermenu:active ul*{display:none；}我在你点击下拉菜单并关闭后发现了一个问题，在你点击某个东西之前悬停不起作用，我还添加了警报。但是警报没有显示，@Alexandros是对的，在你点击后悬停消失了。没有什么是不可能的，有些事情更难完成。

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

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