Problems calculating absolute div
<p>i have created vertical Menu with fixed width and absolute position ul</p>

<pre><code>.categories ul.sub {
position: absolute;
right: -191px;
top: 0;
background: #fff;
width: 190px;}
</code></pre>

<p>but the problem is that i dont want to use fixed width and right. I want to calculate the width and the right of a ul depending of h2 class width inside ul with js. example : how is now: <a href="http://prntscr.com/rzcvx" rel="nofollow">http://prntscr.com/rzcvx</a> , how i need: <a href="http://prntscr.com/rzd3t" rel="nofollow">http://prntscr.com/rzd3t</a></p>

<p>html example: </p>

<pre><code>&lt;div class="categories"&gt;
&lt;ul class="maincats"&gt;
    &lt;li&gt;
        &lt;a class="first"&gt;&lt;img/&gt;&lt;span&gt;Category Name&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="sub first"&gt;
            &lt;li&gt;&lt;h2&gt;H2 Title&lt;/h2&gt;&lt;/li&gt;
            &lt;li&gt;Title&lt;/li&gt;
            &lt;li&gt;Title&lt;/li&gt;
            &lt;li&gt;Title&lt;/li&gt;
            &lt;li&gt;Title&lt;/li&gt;
        &lt;/ul&gt;

    &lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;
</code></pre>

<p>i have nothing tried yet, i only use this js</p>

<pre><code>  $(".categories li a").hover(
        function () {
            $(this).addClass("hover");
            $(this).next('ul.sub').show();
        },
        function () {
            $(this).removeClass("hover");
            $(this).next('ul.sub').hide();
        }


    );

  $(".categories ul.sub").hover(
        function () {
            $(this).prev().addClass("hover");
            $(this).show();
        },
        function () {
            $(this).prev().removeClass("hover");
            $(this).hide();
        }


    );

  $(function () {
      var zIndexNumber = 10;
      // Put your target element(s) in the selector below!
      $(".categories ul.sub").each(function () {
          $(this).css('zIndex', zIndexNumber);

      });
  });
</code></pre>

<p>Please help me i have basic js skils :)</p>
