Javascript 当按下回车键时，选项卡仅打开下拉列表

我有一些下拉列表。目前，当我将鼠标悬停在下拉列表上时，它们会很好地打开。但是，当我在网站上按tab键时，当我在每个列表项上按tab键时，下拉列表会打开。我只想在按下enter键时打开下拉列表，然后在保持悬停功能不变的情况下继续通过菜单进行制表

<div class="container">
    <ul>
        <li class="dropdown tabindex="2">
            <a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a> 
            <i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
            <div class="dropdown-menu">
            </div>
        </li>
        <li class="dropdown tabindex="2">
            <a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a> 
            <i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
            <div class="dropdown-menu">
            </div>
        </li>
        <li class="dropdown tabindex="2">
            <a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a> 
            <i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
            <div class="dropdown-menu">
            </div>
        </li>
    </ul>
</div>

---

示例代码中没有实际的下拉列表，是哪个库创建了下拉列表？是什么神奇的代码使它们打开/关闭？@epascarello查看更新的代码，请告诉我此帮助是否需要一些JavaScript。您可以将其更改为

。下拉：悬停>。下拉菜单、.dropdown:focus>。下拉菜单、.dropdown>。下拉菜单：focus

，无需输入即可自动打开。

.dropdown:hover > .dropdown-menu {
    display: block;
}