当仅点击打开下拉菜单时，按Enter

Question

我在列表中有一些下拉菜单。目前，当我将鼠标悬停在下拉菜单上时，它们打开得很好。但是，当我浏览网站时，当我浏览每个列表项时，下拉列表将打开。我只想在按下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>

CSS

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