下拉菜单垂直3级

Question

垂直下拉菜单，最后一个列表项中有一个错误

<div class="geral">
  <ul class="nav">
    <li class="dropdown"> <a href="#">categoria</a>
      <ul>
        <li><a href="#">nivel 1</a></li>
        <li class="dropdown"> <a href="#">nivel 2</a>
          <ul style="background: #f00;">
            <li><a href="#">nivel  2.1</a></li>
            <li class="dropdown"> <a href="#">Level 2.2</a>
              <ul style="background: #0f0;">
                <li><a href="#">Level 2.1.1</a></li>
                <li class="dropdown">
                  <a href="#">Level 2.1.2</a>
                  <ul style="background: #00f;">
                    <li><a href="#">Level 2.1.1.1</a></li>
                    <li><a href="#">Level 2.1.1.2</a></li>
                  </ul>
                </li>
                <li><a href="#">Level 2.1.3</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

使用错误链接到演示：https://jsfiddle.net/joseferreira/z4j8dfbt/