I am attempting to create a combobox using HTML and CSS where each item is displayed on a separate line and lights up blue when hovered over, similar to Google's design. The basic setup is simple. I have a div
with links (a
) inside, and each link is styled with display:block
in CSS to occupy the entire div
. I then added a dotted outline to the hovered link, but encountered some unexpected behavior.
Here is the jsFiddle for reference.
When hovering over the top link, the outline appears as expected. However, the outlines for the other links are not displaying correctly. The second link down only shows at the bottom, while the rest do not show at all.
Any assistance with this issue would be greatly appreciated.
EDIT: I am using IE8 on Windows XP