optimizing (nearly minimizing) width of jqueryui menu

Question

I have a Jqueryui menu which is AJAX generated at runtime. Its generated HTML is

 <ul id='menu_id'>
   <li>-</li>
   <li>the_system</li>
   <li>the_agenda</li>
 </ul>

The first <li>-</li> is on purpose a line separator. Ever other list item contains a single word (C-like identifier), such as <li>this_little_thing</li>.... The font is not monospaced. The menu should ultimately be used for autocompletion purposes "inside" (actually "over") some <textarea>.

Of course, the Javascript is doing something like

var mymenu=$("#menu_id");
mymenu.menu({
        select: function(ev,ui) {
           console.log("menu selected ev=", ev, " ui=", ui);
        }
});

but I have no idea how to compute the nearly minimal width of that menu. Currently that menu spans the entire width of its container, so is nearly as wide as the web page. I tried several things, such as:

    var minwidth = 40;
    /// dont work, the el has same width as body
    mymenu.children("li").each(function(ix,el) {
        console.log("ix=", ix, " el=", el, " .firstChild=", el.firstChild);
        var elw = el.firstChild.clientWidth;
        console.log("ix=", ix, " elw=", elw);
        if (minwidth<elw)
           minwidth=elw;
    });

---

Gory details

Same context as my previous question: Firefox 38 or 42, Jquery 2.2.0, Jquery-Ui 1.11.4, Linux/Debian/Sid/x86-64, for my free software GPL alpha stage MELT monitor; I'm talking of the commit e89f3f807ec.. if that matters. If you are brave enough to build it and test it, run

  ./monimelt -Drun,web -W localhost.localdomain:8086/ -J 3

then browse http://localhost.localdomain:8086/nanoedit.html and type in the <textarea> right to Command: the three letters the, and then press simultaneously Ctrl Space ; a completion menu should appear, but it is way too wide!

---

---

^{(in the image the menu is in gray, above the send command button near bottom; in my webroot/nanoedit.js file, it is built in function mom_cmdkeypress after line 215; the menu_id HTML5 id is in fact commandcompletemenu_id and my Javascript variable is menuel not mymenu )}

Simplified Jsfiddle (MVCE)

This https://jsfiddle.net/bstarynk/2k464q18/ jsfiddle shows the same issue with HTML

 <h2> my menu </h2>
 <div id='mymenudiv_id'>
  <ul id='menu_id'>
    <li>-</li>
    <li>the_system</li>
    <li>the_agenda</li>
  </ul>
 </div>
 <h2  id='width_id'>-</h2>

and javascript:

var mymenu;
$(document).ready(function() {
   mymenu = $("#menu_id");
   var mywidth = 40;
   mymenu.children("li").each(function(ix, el) {
     console.log("menu-children ix=", ix, " el=", el);
     var elw = $(el).width();
     console.log("menu-children ix=",ix, " elw=", elw);
     if (mywidth<elw)
        mywidth = elw;
   });
   $("#width_id").html("mywidth="+mywidth.toFixed(0));
   mymenu.menu({
        select: function(ev, ui) {
          console.log("menu-select ev=", ev, " ui=", ui);
   }
 })
})

and the standard https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css CSS; on my browser it shows mywidth=523 which is obviously wrong. also, replacing var elw = $(el).width(); in the JsFiddle with var elw = el.clientWidth; don't change anything.

simpler question

Perhaps I just want to know what are the CSS3 settings to have an <ul> element with vertically aligned small <li> elements and minimal width to fit the widest <li>, but I can't figure that.... so I asked the CSS3 to make a thin ul fitting its li question.