emmet expansion not aligned/indented as I expected

Question

If I expand this:

#main>#nav>ul>li>{My Web Host}

I get this:

<div id="main">
    <div id="nav">
        <ul>
            <li>My Web Host</li>
        </ul>
    </div>
</div>

and it's good.

If I expand this:

#main>#nav>ul>li>{My Web Host}>ul>li>

I get this:

<div id="main">
    <div id="nav">
        <ul>
            <li>My Web Host
                <ul>
                    <li></li>
                </ul></li>
        </ul>
    </div>
</div>

Although the closing tag of the first li is after the last ul I was hoping it would be on the next line aligned under it's opening tag.

Answer 1

This abbreviation is incorrect at {My Web Host}>ul: you’re trying to put block element (ul) inside implicit inline element ({My Web Host}). In this case, you have to place ul after text node, e.g. use + operator.

Correct abbreviation is #main>#nav>ul>li>{My Web Host}+ul>li