html - :focus is not working in dropdown list in some browsers

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? .这样，当您不显示子项时，您就无法使用它们的悬停效果。