title: How to get the value from a selected li?
body: <p>I copied a horizontal selection menu from CodePen, here's the <a href="http://codepen.io/bharanim/pen/yYWLLP?q=horizontal%20selection&amp;limit=all&amp;type=type-pens" rel="nofollow noreferrer">source code</a></p>
  
  <p>Here's the result:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var btn = document.querySelector("button")
  var dropdown = document.querySelector(".dropdown-options")
  var optionLinks = document.querySelectorAll(".option a")
  console.log(optionLinks)
  
  btn.addEventListener("click", function(e) {
    e.preventDefault()
    console.log("btn")
    dropdown.classList.toggle("open")
  });
  
  var clickFn = function(e) {
    e.preventDefault()
    dropdown.classList.remove("open")
    btn.innerHTML = this.text
    var activeLink = document.querySelector(".option .active")
  
    if (activeLink) {
      activeLink.classList.remove("active")
    }
    this.classList.add("active")
  }
  for (var i = 0; i &lt; optionLinks.length; i++) {
    optionLinks[i].addEventListener("mousedown", clickFn, false)
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    max-width: 500px;
    margin-top: 10px;
    margin-left: 0px;
  }
  .container button {
    position: relative;
    background: none;
    border: none;
    outline: none;
    font-size: 16px;
    border-bottom: 2px solid #9b9b9b;
    padding-bottom: 8px;
    min-width: 150px;
    text-align: left;
    outline: none;
    cursor: pointer;
    z-index: 2;
  }
  .container button:after {
    content: '▾';
    position: absolute;
    right: 0px;
    top: 0%;
    color: rgb(142, 142, 142);
  }
  .container .dropdown {
    position: relative;
  }
  .container .dropdown .dropdown-options {
    list-style: none;
    margin: 0;
    padding: 0;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transform: scale(0.8) translate3d(-20px, 0px, 0);
            transform: scale(0.8) translate3d(-20px, 0px, 0);
    -webkit-transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
    transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
    transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
    transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    z-index: 1;
  }
  .container .dropdown .dropdown-options.open {
    opacity: 1;
    -webkit-transform: scale(1) translate3d(0, 0, 0);
            transform: scale(1) translate3d(0, 0, 0);
    z-index: 5;
  }
  .container .dropdown .dropdown-options li {
    display: inline-block;
  }
  .container .dropdown .dropdown-options li a {
    text-decoration: none;
    display: inline-block;
    padding: 10px 16px;
    color: #2975DA;
  }
  .container .dropdown .dropdown-options li a:hover {
    color: #2269c7;
  }
  .container .dropdown .dropdown-options li a.active {
    border-bottom: 2px solid #9b9b9b;
    color: #9b9b9b;
  }
  .container .dropdown .dropdown-options li a.active:hover {
    color: #9b9b9b;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="dropdown"&gt;
      &lt;button&gt;Type&lt;/button&gt;
      &lt;ul class="dropdown-options"&gt;
        &lt;li class="option"&gt;
          &lt;a href="#"&gt;A&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="option"&gt;
          &lt;a href="#"&gt;B&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="option"&gt;
          &lt;a href="#"&gt;C&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="option"&gt;
          &lt;a href="#"&gt;D&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have trouble with how to get the <code>selected li</code> before I submit this form. It's not a <code>&lt;select&gt;</code> and I use this menu in a form, is there a easy way to get the selected value of <code>li</code> using <code>JavaScript</code>?</p>