title: Convert HTML List to a List with Dropdown Menu
body: <p>I have an HTML list, and I want to create a new list out of it to support dropdown if some items start with <code>-</code>.</p>
  <p>It works fine if the list items that start with <code>-</code> are in the middle of the list but not if these items are the latest ones.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let dropDown_list = [],
      latest_navigation_item,
      navigation_list = document.querySelectorAll('.c-nav .c-nav__item');
  
    navigation_list.forEach(function(item) {
      if (item.childNodes[1].innerText.startsWith('-')) {
        dropDown_list.push(item);
      } else {
        if (dropDown_list.length &gt; 0) {
          let dropDown = document.createElement('ul');
          dropDown.className = 'c-nav__dropDown';
  
          dropDown_list.forEach(function(dropDown_item) {
            dropDown_item_text = dropDown_item.childNodes[1].innerText;
            dropDown_item.childNodes[1].innerText = dropDown_item_text.replace('-', '');
            dropDown.append(dropDown_item);
          });
  
          latest_navigation_item.className += ' c-nav__item--hasDropDown';
          latest_navigation_item.append(dropDown);
        }
  
        latest_navigation_item = item;
        dropDown_list = [];
      }
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="c-nav"&gt;
    &lt;li class="c-nav__item"&gt;
      &lt;a href="http://localhost:2369/latest/" class="c-nav__link "&gt;Latest&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="c-nav__item"&gt;
      &lt;a href="http://localhost:2369/authors/" class="c-nav__link "&gt;Authors&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="c-nav__item"&gt;
      &lt;a href="http://localhost:2369/tag/politics/" class="c-nav__link "&gt;- Politics&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="c-nav__item"&gt;
      &lt;a href="http://localhost:2369/tag/covid/" class="c-nav__link "&gt;Covid&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="c-nav__item"&gt;
      &lt;a href="http://localhost:2369/tag/history/" class="c-nav__link "&gt;- History&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="c-nav__item"&gt;
      &lt;a href="http://localhost:2369/tag/technology/" class="c-nav__link "&gt;- Technology&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is there anything I can fix this?</p>