How can I position some divs inside an unordered list so they line up with the root element of the list?

Question

I want to position all the divs to line up to the left on the same x coordinate so it looks nice.

Notice the picture below, how based on the number of nested categories the div (and its contents) show up at slightly different x coordinates. I need to have the div's line up at exactly the same x coordinate no matter how deeply nested. Note, the bottom most category always has a div for the content, but that div has to be situated inside the last < li >.

I am using an unordered list to display the menu and thought the best solution would be to grab the root category (Cat 2, and mCat1) and obtain their left offset using jquery, then simply use that value to update the positioning of the div...but I couldn't seem to get it to work just right. I would appreciate any advice or help that you are willing to give.

Heres the HTML

<ul id="nav>
  <li>Cat 2
     <ul>
        <li>sub cat2</li>
     </ul>
  </li>
  <li>mCat1
      <ul>
         <li>Subcat A
            <ul>
               <li>Subcat A.1
                  <ul>
                     <li>Annie</li>
                  </ul>
               </li>
            </ul>
          </li>
        </ul>
   </li>
 </ul>

Heres some jquery I tried (I have do insert the div inside this .each() loop in order to retrieve some values, but basically, this selector is grabbing the last < li > in the menu tree and placing a div after it and that is the div that I want to position. the 245 value was something I was playing around with to see how I could get things to line up, and I know its out of wack, but the problem is still the same no matter what I do:

$("#nav li:not(:has(li))").each(function () {
                var self = $(this);
                self.after( '<div id="' + self.attr('p_node') + '_p_cont_div" class="property_position" style="display:none;" /> ' );
        });

        //ROOT - Retrieve the position of the root element in order to place the div in the right spot
        var p = $("#nav li:first");
        var position = p.offset();
        var xbaseLeft = Math.round(position.left);
        $("#nav li:not(:has(li))>div").css('left', xbaseLeft);

Heres the css:

.property_position{
float:left;
position: relative;
top: 0px;
padding-top:5px;
padding-bottom:10px;
  }

/*  MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
margin-left:0;
padding-left:0px;
text-indent:15px;   
}
ul#nav div{
  overflow: hidden;
}

#nav li>a:hover { 
    cursor: pointer;
}
#nav ul { 
/* This handles any nested <ul>'s inside an id of "#nav" */
display:none; 
margin-left:0px; 
padding-left:15px;
text-indent:15px;

margin:0px;
}
#nav li {
list-style-type:none;
vertical-align: top;
list-style-image: none;
left:0px;
text-align:left;
clear: both;

margin:0px;
}

Answer 1

You shouldn't need any JavaScript/jQuery for this. CSS is very capable on its own. The CSS that you posted, however, has no effect on your HTML until (and if) the jQuery (which shouldn't be necessary) is executed.

Lists are indented automatically, and I bet that is causing the positioning that you want to correct. Adding this to your CSS should work:

ul, li
{
    margin: 0;
    padding: 0;
}

If that doesn't work, you might just have a problem with these CSS declarations being overridden by others more specific, so you would need to make these selectors more specific. If you post a link to the page, we can more easily help you determine what's going on and tell you how to fix it.