Question

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

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

此解决方案有效，并且仅在其他浏览器（如Samsung Internet和UC浏览器）未显示子菜单的:focus时显示Google Chrome的子菜单项。

我通过同时使用: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?。这样，当您不显示子项时，您将无法使用其悬停效果。

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

1 个答案: