The structure of a root menu item is as follows.  

Note:  I am removing some additional attributes for clarity

<div class="NodeDefault" id="ctr1" title="bin">
  <span class="NodeIconDefault">
    <img id="icn1" src="images/folder.gif">
  </span>
  <span id="t1" class="NodeText">
    RootMenuItem
  </span>
</div>
 

Not sure what you find weird about this.  The span surrounding the image allow you to style the image with css, even when their is no image present.

The Span around the text allows you to style the text display.

The containing div allows the container of the entire item be styled.

The structure of a sub-item is as follows.

<div class="MenuClass" id="sub_1_1">
  <div class="ChildNodeDefault" id="ctr_1_1_1">
    <span class="NodeIconDefault">
      <img id="icn_1_1_1" src="images/file.gif">
    </span>
    <span id="t_1_1_1" >
      SubMenuItem
    </span>
  </div>
</div>

The only difference here is the containing sub_1_1, which allows for the entire sub-menu to be styled.

As to the reason I stayed away from a nested list structure, two come to mind, but their are probably more.

1)  I don't see the need for using them,  what do they offer that this structure does not? Remember none of this HTML is sent down over the wire.

2) To support Populate On Demand, I did not want to worry about inserting items into an existing hierarchy. 

You sound rather opinionated when you say that practically any menu system does things a certain way, yet you seem to be thinking that the approach that I take with the menu is the same as every other menu.  I don't think so.  Most menus out there transmit HTML markup from the server.  I do not.  My reasons for not choosing to send HTML over the wire are specified in this document.