如何获取jQuery UI菜单选中LI元素的value属性？为何无高亮效果？

我基于jQuery UI的分类菜单示例做了修改，给每个可选择的<li>元素都添加了VALUE="some_number"属性，对应的HTML结构如下：

<ul id="menu"> 
  <li class="ui-widget-header"> Category 1 </li> 
  <li value="1"> Option 1 </li> 
  <li value="2"> Option 2 </li> 
  <li value="3"> Option 3 </li> 
  <li class="ui-widget-header"> Category 2 </li> 
  <li value="4"> Option 4 </li> 
  <li value="5"> Option 5 </li> 
  <li value="6"> Option 6 </li> 
</ul>

之后我初始化了菜单组件，还添加了一个按钮，想在点击按钮时获取选中项的value并弹窗显示：

$("#menu").menu({ items: '> :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); 
});

现在碰到两个棘手的问题：

• .val()显然不是获取选中项value的正确方法，我试过直接取li的attr也不行，想知道怎么通过$("#menu")这个菜单实例来拿到选中项的value？
• 官方示例里的列表项在hover和选中状态下都会有高亮效果，但我的实现里完全看不到这个效果，这是哪里出问题了？

更新：
有朋友建议用HTML原生的select/optgroup/option来替代，这个方案确实可行，但我还是希望能把自己的jQuery UI菜单给调试正常。另外我也在jQuery官方论坛发了这个问题求助。

内容的提问来源于stack exchange，提问作者Alexander Farber