optimizing (nearly minimizing) width of jqueryui menu
<p>I have a <a href="https://api.jqueryui.com/menu/" rel="nofollow noreferrer">Jqueryui menu</a> which is AJAX generated at runtime. Its <em>generated</em> HTML is</p>

<pre><code> &lt;ul id='menu_id'&gt;
   &lt;li&gt;-&lt;/li&gt;
   &lt;li&gt;the_system&lt;/li&gt;
   &lt;li&gt;the_agenda&lt;/li&gt;
 &lt;/ul&gt;
</code></pre>

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

<p>Of course, the Javascript is doing something like</p>

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

<p>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:</p>

<pre><code>    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&lt;elw)
           minwidth=elw;
    });
</code></pre>

<hr>

<h3>Gory details</h3>

<p>Same context as my <a href="https://stackoverflow.com/q/34673243/841108">previous</a> 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 <a href="https://github.com/bstarynk/melt-monitor-2015" rel="nofollow noreferrer">MELT monitor</a>; I'm talking of the commit <a href="https://github.com/bstarynk/melt-monitor-2015/commit/e89f3f807ec38a737303b4c39a17b4b90e910326" rel="nofollow noreferrer">e89f3f807ec..</a> if that matters. If you are brave enough to build it and test it, run </p>

<pre><code>  ./monimelt -Drun,web -W localhost.localdomain:8086/ -J 3
</code></pre>

<p>then browse <a href="http://localhost.localdomain:8086/nanoedit.html" rel="nofollow noreferrer">http://localhost.localdomain:8086/nanoedit.html</a> and type in the <code>&lt;textarea&gt;</code> right to <em>Command:</em> the three letters <code>the</code>, and then press <em>simultaneously</em> <kbd> Ctrl Space </kbd>; a completion menu should appear, but it is way too wide!</p>

<hr>

<p><a href="https://i.stack.imgur.com/wWesq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wWesq.png" alt="Screenshot of Melt Monitor inside Firefox"></a></p>

<hr>

<p><sup>(in the image the menu is in gray, above the <code>send command</code>  button near bottom; in my <a href="https://github.com/bstarynk/melt-monitor-2015/blob/master/webroot/nanoedit.js" rel="nofollow noreferrer"><code>webroot/nanoedit.js</code> file</a>, it is built in function <code>mom_cmdkeypress</code>  after line 215; the <code>menu_id</code> HTML5 id is in fact <code>commandcompletemenu_id</code> and my Javascript variable is <code>menuel</code> not <code>mymenu</code>  )</sup></p>

<h2>Simplified Jsfiddle (MVCE)</h2>

<p>This  <a href="https://jsfiddle.net/bstarynk/2k464q18/" rel="nofollow noreferrer">https://jsfiddle.net/bstarynk/2k464q18/</a> jsfiddle shows the same issue with HTML</p>

<pre><code> &lt;h2&gt; my menu &lt;/h2&gt;
 &lt;div id='mymenudiv_id'&gt;
  &lt;ul id='menu_id'&gt;
    &lt;li&gt;-&lt;/li&gt;
    &lt;li&gt;the_system&lt;/li&gt;
    &lt;li&gt;the_agenda&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/div&gt;
 &lt;h2  id='width_id'&gt;-&lt;/h2&gt;
</code></pre>

<p>and javascript:</p>

<pre><code>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&lt;elw)
        mywidth = elw;
   });
   $("#width_id").html("mywidth="+mywidth.toFixed(0));
   mymenu.menu({
        select: function(ev, ui) {
          console.log("menu-select ev=", ev, " ui=", ui);
   }
 })
})
</code></pre>

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

<h3>simpler question</h3>

<p>Perhaps I just want to know what are the CSS3 settings to have an <code>&lt;ul&gt;</code> element with vertically aligned small <code>&lt;li&gt;</code> elements and <em>minimal</em> width to fit the widest <code>&lt;li&gt;</code>, but I can't figure that.... so I asked the <a href="https://stackoverflow.com/questions/34753614/css3-to-make-a-thin-ul-fitting-its-li">CSS3 to make a thin ul fitting its li</a> question.</p>