dynamisch Position UL verschachtelt basierend auf Mutter LI Breite

Question

Der Versuch, den folgenden Effekt

Der HTML-Code möchte dies umzusetzen:

<ul class="product-selection"> 
     <li> 
      <a href="#">Level One</a> 
      <ul> 
       <li> 
        <a href="#">Level Two</a> 
        <ul> 
         <li> 
          <a href="#">Level Three</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 

Jede verschachtelte UL absolut von der positioniert werden links und ich möchte den linken Wert von UL basierend auf der Breite des Eltern-LI so einstellen, dass sie direkt nebeneinander erscheinen.

Ich konnte dies für die erste verschachtelte UL mit dem folgenden Code erreichen, kann jemand bitte eine bessere Version von diesem zur Verfügung stellen.

var ulWidth = 0; 
$j(function() { 
    ulWidth = ulWidth + $j('ul.product-selection > li').width(); 
    $j('ul.product-selection > li > ul').css({'left': ulWidth}); 
}); 

Answer 1

Lösung zu meiner Frage:

$j('.product-selection a').on('click', function(e) { 
    e.preventDefault(); 
    var prevLevel = $j(this).parents('.list-wrap').width(); 
    $j(this).next('.list-wrap').show(); 
    $j(this).next('.list-wrap').css({'left': prevLevel}); 
});