How to display a list of links as a drop down select?

Question

I want to display a list of links like a drop down select, without losing the semantic if possible. Here's what I tried. The CSS obviously does not work now. For the select I emulated the link a bit with location.href in the JavaScript but it loses semantic value, and accessibility I guess.

Without jQuery and Bootstrap,

How to display a list of links as a drop down select ?

document.getElementById("0").addEventListener("change", function (event) {
  location.href = event.target.value;
});

.like-select {
  appearance: select;
}

<p>Semantic wanted</p>
<ul class="like-select">
  <li><a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a></li>
  <li><a href="https://stackoverflow.com">Stack Overflow</a></li>
  <li><a href="http://www.echojs.com/">Echo Js</a></li>
</ul>

<p>Look and feel wanted especially on mobile</p>
<select id="0">
  <option value="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</option>
  <option value="https://stackoverflow.com">Stack Overflow</option>
  <option value="http://www.echojs.com/">Echo Js</option>
</select>

Answer 1

The WAI provides multiple examples of emulated listbox using role=listbox and role=option. This requires the use of aria-activedescendant and aria-selected for better accessibility support.

See Examples under section: 3.13 Listbox

For the styling, you can copy the style used by the user agent stylesheet.

That being said, it might a bad idea to style a list of links as a dropdown select as it could lead to an unpredictable change of context