时间戳

首页 > 解决方案 > :focus 在某些浏览器的下拉列表中不起作用

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

问题描述

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

我通过使用:focusfor sub-menu 和:focus-withinfor its items 找到了一种解决方法。

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

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

我有两个问题：

使用的 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;
    
    }

标签： htmlcssmobilemenudropdown

解决方案

如果不了解您是如何实现 HTML 的，就很难知道哪种答案最适合这种情况。:focus-within没有得到很好的支持：https ://caniuse.com/#search=focus-within 。没有看到其他任何东西我在想也许你会使用 JS 来添加和删除:hover/:focus喜欢这个答案：我可以通过 JavaScript 禁用 CSS :hover 效果吗？. 这样，当您不显示子项目时，您就不能使用它们的悬停效果。

推荐阅读