Nested Lists in Slim-lang

Question

I'm trying to nest a second ul in a list item in Slim-lang like so:

div.row
        ul.dropdown
            li Dropdown Option 1
                ul
                    li Dropdown Option 2
                    li Dropdown Option 3

Expected outcome was this:

<div class="row">
  <ul class="dropdown">
    <li>Dropdown Option 1</li>
      <ul>
        <li>Dropdown Option 2</li>
        <li>Dropdown Option 3</li>
      </ul>
    </li>
  </ul>
</div>

Received output was:

<div class="row">
  <ul class="dropdown">
    <li>Dropdown Option 1 ul li Dropdown Option 2 li Dropdown Option 3</li>
  </ul>
</div>

Do I simply have an error or is this a problem with slim-lang?

Answer 1

For this to work the text you have on the li Dropdown Option 1 needs to be moved to it's own line (not inline). This should work (note the 3rd and 4th lines):

div.row
        ul.dropdown
            li 
              | Dropdown Option 1
                ul
                    li Dropdown Option 2
                    li Dropdown Option 33