:focus 在某些浏览器的下拉列表中不起作用

Question

我正在尝试创建一个移动垂直下拉菜单，但在同时使用 :focus 显示子菜单项时遇到问题。

我找到了一种解决方法，将:focus 用于子菜单，将:focus-within 用于其项目。

此解决方案正在工作并仅显示 Google Chrome 的子菜单项，而三星互联网和 UC 浏览器等其他浏览器除了子菜单的 :focus 外不显示任何内容。

我找到了另一种解决方案，对两者都使用:hover，它几乎适用于所有浏览器。

我有两个问题：

• 为什么它只适用于 chrome？
• 如何将:focus 用于子菜单及其项目？

使用的 CSS ：

.main-nav a {
	color:black;
	display: block;
	padding: 10px 3px 10px 3px;
    font-size: 20px;
    text-align: center;
    font-family: 'hayah';
    border-radius: 25px;
    transition: border-radius 0.2s ease-in;

}
.main-nav a:hover {
    background:#D7D7D7;
    border-radius:25px 25px 0 0; 
    -webkit-transition: border-radius 0.1s ease-in;
    -moz-transition: border-radius 0.1s ease-in;
    -o-transition: border-radius 0.1s ease-in;
    transition: border-radius 0.1s ease-in;  
    display: block;
    }
    
.main-nav-ul ul { 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    opacity: 0; 
    max-height: 0;
    overflow: hidden; 
    background-color: #D9D9D9;
    color: black;
    margin-bottom: 10px;
    margin-top: 5px;
    border-radius: 0 0 25px 25px;
    font-size: 12px;
    
    }
    
    
.main-nav-ul li:hover ul {  
    opacity: 1 !important;
    max-height: 400px !important;
    color: black;
    background-color: #E2E2E2;
    display: block;
    
    }

Answer 1

如果不了解您是如何实现 HTML 的，就很难知道哪种答案最适合这种情况。 :focus-within 没有得到很好的支持：https://caniuse.com/#search=focus-within。在没有看到任何其他内容的情况下，我在想也许您会使用 JS 添加和删除:hover/:focus，就像这个答案：Can I disable a CSS :hover effect via JavaScript?。这样，当您不显示子项目时，您就不能使用它们的悬停效果。