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

【问题标题】：USING ARROW KEYS TO SCROLL DOWN A DROPDOWN MENU使用箭头键向下滚动下拉菜单
【发布时间】：2023-03-23 13:29:02
【问题描述】：

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

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>

【问题讨论】：

你为什么对我们大喊大叫？
也许他的键盘坏了，这就是为什么下拉菜单无法使用箭头键 /s
我喜欢他的名字也是全大写

标签： javascript jquery html css

【解决方案1】：

您为什么不尝试使用引导下拉菜单？它们具有许多功能，并且可以使用其他一些类轻松自定义。

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

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

【讨论】：