将锚点从:悬停元素移动后列表隐藏

Question

当鼠标悬停在<a>元素上时，我想显示列表。列表显示，但当我想从中选择一个项目时，它会再次隐藏。

我需要代码保持显示，直到我点击其中的项目。

我想要CSS中的东西，我现在正在学习JS

.acc {
/* Account id */
font-family: 'Courier', arial;
color: black;
font-size: 3em;
text-decoration: none;
text-align: center;
}
.acc:hover {
color: #C0C0C0;
}
.hide {
display: none;
}
.acc:hover+.hide {
display: block;
font-family: 'Courier', arial;
color: black;
font-size: 3em;
text-decoration: none;
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}

<div>
<a class="acc" href="acc">Accounts </a>
<ul class="hide">
<li><a href="face">Facebook</a></li>
</ul>
</div>

Answer 1

您只需要添加.hide:hover.

.acc:hover + .hide,
.hide:hover{
display:block;
font-family:'Courier', arial;
color:black;
font-size:3em;
text-decoration:none;
list-style-type:none;
padding:0px;
margin:0px;
overflow:hidden;
}