List elements are being displayed out of order

Question

... when inserted dynamically. I would not have intuited this, and find it hard to believe this is expected behavior, but when I dynamically insert list elements by changing their display with JavaScript, they display out of order. This pic sums it up.

Is this expected or a bug?

Code that matches the display type:

    Backbone.on('user_sign_in', function () {
        $A.log('user_sign_in event')
        if (getComputedStyle(self.E.main_nav, null).display === 'block') {
            self.E.user_menu.style.display = "block";
        } else {
            self.E.user_menu.style.display = "inline-block";
        }
    });

One solution causes this issue:

Answer 1

This may have something to do with putting a span inside a ul, which is invalid HTML.

<ul>

Permitted content:

zero or more <li> elements, eventually mixed with <ol> and <ul> elements.

source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

---

If you need to create sub-groups of list items, then nest your lists.

<ul>
    <li>...</li>
    <li>...</li>
    <li>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>...</li>
</ul>

---

Update (based on comments and revised question)

In your nav screenshot, the gap along the bottom margin may be caused by display: inline-block.

Here are two methods for removing it:

• change the display value to block
• add vertical-align: bottom to the rule

For an explanation and other methods see this post:

• inline-block boxes not fitting in their container

Answer 2

there are two different menu classes in there: .user-menu (in the span tag) and .top-menu (including all items, also the span). Probably they have different CSS... Also the use of that span is a bit strange...