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

Answer 2

I think you are looking for something like this?Without using Jquery and Bootstrap solution

Dropdown for Url

HTML

<div class="dropdown">
  Select URL...
  <div class="dropdown-content">
   <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>
  </div>
</div>

CSS

.dropdown {
    position: relative;
    display: inline-block;
        padding: 10px;
       width:160px;

    border: 1px solid;
}
.dropdown:after{
  content: '\25BC';
  position: relative;
    font-size:14px;
   float:right;


}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: inherit;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   top: 39px;
    left: 0;
    width: 100%;
    z-index: 1;
}
li a{
  text-decoration:none;
    color: black;
    padding:10px;
}
ul{
  padding:0;
  margin:0;
}
li{
      list-style: none;
    padding:10px;

  border-bottom:1px solid black;
}
li:hover{
  background-color:gray;

}
li:hover a{
    color:white;
}

JS

var dropdown = document.getElementsByClassName("dropdown");
var attribute;
var myFunction = function() {
attribute = this.getAttribute("data-target");
    var x = document.getElementById(attribute);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

};
for (var i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener('click', myFunction, false);
}

Working Fiddle