title: Dynamically position nested UL based on parent LI width
body: <p>Trying to implement the following effect</p>
  
  <p><a href="https://i.stack.imgur.com/4Xt2D.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Xt2D.jpg" alt="Horizontally Stacked Nested UL Elements"></a></p>
  
  <p>The HTML Code would like this:</p>
  
  <pre><code>    &lt;ul class="product-selection"&gt; 
          &lt;li&gt;
              &lt;a href="#"&gt;Level One&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Level Two&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Level Three&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Each nested UL will be absolutely positioned from the left and I would like to set UL's Left value based on it's parent LI's width so that they appear right next to each other.</p>
  
  <p>I was able to achieve this for the first nested UL with the following code, can someone please provide a better version of this.</p>
  
  <pre><code>var ulWidth = 0;
  $j(function() {
      ulWidth = ulWidth + $j('ul.product-selection &gt; li').width();
      $j('ul.product-selection &gt; li &gt; ul').css({'left': ulWidth});
  });
  </code></pre>