Question

I got help earlier for the placement if my jquery box but it wasn’t universal and I don’t quite understand it. The code moves my drop down box to expand toward the right, however now that I’ve changed the links position, the box no longer lines up correctly. Here’s the new code:

$('.menu ul li:has("ul")').each(function(){
   var nameWidth = $(this).outerWidth(),
       dropdownWidth = $(this).find('ul').width(),
       change = (dropdownWidth - nameWidth) - 10;
    $(this).find('ul').css('left', change+'px');

Here’s my entire code http://jsfiddle.net/rKaPN/30/

Answer 1

In your css you can change the following:

.menu ul li ul{
   position:absolute;
   right: 0px;  // Add this  
   // Rest of your css
}

It will align the the dropdown to the right, just like you had it earlier to the left, without using the each loop you described. However, your loop also becomes functional when you merely define the left property:

.menu ul li ul{
    position:absolute;
    left: 0px;  // Add this  
    // Rest of your css
}