I am seeking valuable advice and guidance to navigate through this challenging situation.
Here's the scenario: I need to create a dropdown menu similar to the one below.
<ul class="dropdown">
<li><a href="#">America</a></li>
<li><a href="#">Brazil</a></li>
<li><a href="#">China</a></li>
<li><a href="#">Denmark</a></li>
<li><a href="#">Egypt</a></li>
</ul>
The goal is to enable keyboard navigation through the items in the dropdown. For example, pressing "E" should focus on Egypt.
While UL>Li doesn't allow for this functionality, we can use the Select tag instead.
<select class="dropdown">
<option>America</option>
<option>Brazil</option>
<option>China</option>
<option>Denmark</option>
<option>Egypt</option>
<select>
However, styling the dropdown becomes an issue with the Select tag as CSS padding may not work across all browsers.
My question is how can I create a dropdown with these 3 functionalities:
1. Open on Tab key press
2. Navigate listed items using keyboard input.
3. Style the dropdown for cross-browser compatibility.
I have searched extensively online but haven't found a perfect solution, except for this plugin:
Unfortunately, I am unable to use external plugins at work. The only tools I have at my disposal are Bootstrap, jQuery, JavaScript, CSS, and HTML (no Angular).
If anyone can assist me with this, I would greatly appreciate it.