使用箭头键滚动下拉菜单

Question

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

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下拉菜单的例子，他们实际上可以用箭头键在项目之间进行导航

如果您不知道如何将引导程序添加到您的网站或项目，请检查此