Question

当我将鼠标悬停在菜单项[菜单栏]上时，会出现一个带有下拉菜单的菜单栏，但会出现下拉菜单，但无法使用箭头键向下滚动下拉菜单。如果单击菜单项，我仍然无法使用箭头键向下移动菜单。我认为这与焦点[attribute]

有关

Css代码：

.dropdown:hover > .dropdown-nav
{
display:block;
visibility:visible; 
color:white;
background-color:#5F5F5F;
font-size:11.5px;
top:30px;
scrollbar-base-color:#5F5F5F;
height:180px;
overflow-x:no-display;
overflow-y:no-display;
}

#menu
{
padding:0;
z-index:2;
background-color:#5F5F5F;
height:60px;
position:fixed;
vertical-align:middle;
margin:60px 0 0 0;
width:92%;
margin-left:4%;
margin-right:4%;
float:left;
} 

.menu-size
{
font-size:15px;
color:white;
text-align:left;
display:inline;
background-color:#5f5f5f;
height:60px;
padding-bottom:30px;
margin-bottom:-30px;
margin-top:60px;
margin-left:0px;   
padding-top:6px;
width:100px;
}

HTML代码：

<div class="dropdown">
<a class="menu-size" href="#">home</a>
<ul class="dropdown-nav">
<li><a href="index.html">about us</a></li>
<li><a href="index.html">works published</a></li>
<li><a href="index.html#page3">best of the best</a></li>
<li><a href="index.html#page9">recommended links</a></li>
<li><a href="index.html#page9">books to research</a></li>
<li><a href="index.html#page10">links to research</a></li>
</ul>
</div>

Answer 1

您为什么不尝试使用引导程序下拉菜单？它们具有很多功能，并且可以轻松地与其他一些类一起定制。

看看bootstrap 4下拉菜单示例，他们实际上可以使用箭头键在项目之间进行导航

如果您不知道如何在网站或项目中添加引导程序，请检查this

使用箭头键向下滚动下拉菜单

1 个答案: