html - 导航栏中的链接不会将我带到下一页，而是消失了

Question

我对它进行了焦点转换。通常当我点击页面上的其他地方时它会消失，但是当我点击下拉菜单中的一个链接时它也会消失!在我再次单击导航栏中的按钮之前，如何保持它可见!？

CSS:

.nav-item:focus {
    background-color: #444;
}

.nav-item:focus ~ .nav-content {
    max-height: 400px;
    -webkit-transition:max-height 400ms ease-in;
    -moz-transition:max-height 400ms ease-in;
    transition:max-height 400ms ease-in;


} 

Answer 1

.nav-item 是表单元素吗？否则选择器 focus 将无法使用它，您应该为此使用 javascript。此外，您不需要在 .nav-item:focus ~ .nav-content 中使用此“~”:

.nav-item:visited .nav-content {
    max-height: 400px;
    -webkit-transition: max-height 400ms ease-in;
    -moz-transition: max-height 400ms ease-in;
    transition: max-height 400ms ease-in;
}