css - jquery autocomplete ul列表项在使用键盘向上和向下箭头时突出显示

Question

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="z-index: 1003; display: none; width: 415px; top: 267px; left: 882px;">
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-3" class="ui-corner-all" tabindex="-1"> Holland </a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-4" class="ui-corner-all" tabindex="-1"> Hungary </a>
    </li>
</ul>

上面的无序列表在使用 JQUERY 自动完成功能在文本框中输入时作为建议列表出现。

When I scroll through the list using keyboard up and down arrow the list item is not focused in other words the background of current scrolling item is not highlighted.

我试过

.ui-menu .ui-menu-item a:active a:focus a:hover{
    background-color: red;
}

但是没有用，当前滚动列表项的背景总是白色。

谢谢，斯里

Answer 1

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,   
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
   background: red;
   border: none;
   color:#000;
   border-radius:0;
   font-weight: normal;
}

来自 stackoverflow 帖子之一的上述 css 为我提供了解决方案。感谢原始解决方案提供者。