title: Get the value attribute of the selected LI element in jQuery UI menu
body: <p>I have prepared a <a href="http://jsfiddle.net/afarber/6xq2qc8u/6/" rel="nofollow noreferrer">jsFiddle</a> for my question:</p>
  
  <p><a href="https://i.stack.imgur.com/nKeu3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nKeu3.png" alt="screenshot"></a></p>
  
  <p>For that I have taken the <a href="https://jqueryui.com/menu/#categories" rel="nofollow noreferrer">jQuery UI menu with categories</a> example and have just added <code>VALUE="some_number"</code> attribute to each <code>&lt;LI&gt;</code>-element:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
    &lt;li class="ui-widget-header"&gt; Category 1 &lt;/li&gt;
    &lt;li value="1"&gt; Option 1 &lt;/li&gt;
    &lt;li value="2"&gt; Option 2 &lt;/li&gt;
    &lt;li value="3"&gt; Option 3 &lt;/li&gt;
    &lt;li class="ui-widget-header"&gt; Category 2 &lt;/li&gt;
    &lt;li value="4"&gt; Option 4 &lt;/li&gt;
    &lt;li value="5"&gt; Option 5 &lt;/li&gt;
    &lt;li value="6"&gt; Option 6 &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Then I am trying to retrieve and display that value in an alert on a button click:</p>
  
  <pre><code>$("#menu").menu({
    items: '&gt; :not(.ui-widget-header)'
  });
  
  $('#btn').button().click(function(ev) {
    ev.preventDefault();
    var value = $('#menu').val();
    // var value = $('#menu li').attr('value');
    alert('Selected menu value: ' + value);
  });
  </code></pre>
  
  <p>but the <code>.val()</code> seems to be a bad choice here, I probably need to go through <code>$("#menu")</code> for that?</p>
  
  <p>Also I wonder, why are the list items highlighted on hover and on item selection in the jQuery example - but not in my jsFiddle?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>The HTML-select/optgroup/option workaround suggested by clearshot66 is nice, but I would like to get my jQuery UI menu working... I have also posted my problem at the <a href="https://forum.jquery.com/topic/get-the-value-attribute-of-the-selected-li-element-in-jquery-ui-menu" rel="nofollow noreferrer">jQuery forum</a>.</p>