Twitter Type Ahead Highlight Selection

Question

I have implemented the Twitter Type Ahead on my page and it looks great. But for some reason when I arrow down the list of suggestions, the items are not highlighted, but they populate the text box. However, when I hover over the drop down of suggestions with my mouse, the items are highlighted. Is there a reason why the items would not highlight when arrow'd through? If so, how can I accomplish this?

myTypeahead= $('#txtBox').typeahead({
            name: 'typeahead',
            valueKey: "Value",
            remote: 'serviceHander.ashx',
            template: ['<p>{{Value}}</p>'],
            engine: Hogan,
        });

Answer 1

Found the answer.

Turns out that my CSS properties were getting inherited and I had to set the .tt-is-under-cursor explicitly like so:

.tt-is-under-cursor {
    background-color: #000000!important;
    color: #FFFFFF !important;
}

UPDATE

The class has been renamed to .tt-cursor

Example:

.tt-cursor {
    background-color: #000000!important;
    color: #FFFFFF !important;
}