pug(旧Jade)とBlumaでmenu構造を作ったときに気づいた誤動作するワンライナー

nested-menu.vue

<template lang="pug">
div
  main.columns
    div.submenu.column.is-4
      aside.box
        p 左上左上左上左上左上左上
        p 左上左上左上左上左上左上
        p 左上左上左上左上左上左上
      aside.box.menu
        p.menu-label おすすめの記事
        ul.menu-list
          li: a(href="#") おすすめメニュー１
          li: a(href="#") おすすめメニュー２
          li: a(href="#") おすすめメニュー３

        p.menu-label キーワード
        ul.menu-list
          li: a(href="#") キーワードメニュー１
          li: a.is-active(href="#") キーワードメニュー２
            //- ここから下のulが上のaで括られている
            ul
              li: a(href="#") キーワードメニュー２−１
              li: a(href="#") キーワードメニュー２−２
          li: a(href="#") キーワードメニュー３

        //- aと同じ階層に並べれば大丈夫なんだけどliと同じ階層になるとulがネストしない
        ul.menu-list
          li: a(href="#") キーワードメニュー１
          li
            a.is-active(href="#") キーワードメニュー２
            ul
              li: a(href="#") キーワードメニュー２−１
              li: a(href="#") キーワードメニュー２−２
          li: a(href="#") キーワードメニュー３
        
        
        //- 出力されるHTML的にはこうすると正しくなる
        ul.menu-list
          li: a(href="#") キーワードメニュー１
          li
            a.is-active(href="#") キーワードメニュー２
            ul
              li: a(href="#") キーワードメニュー２−１
              li: a(href="#") キーワードメニュー２−２
          li: a(href="#") キーワードメニュー３

    div.column
      | 本文本文本文本文本文本文
</template>