title: Create html drop down based on existing menu
body: <p>I have this menu:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a class="index" href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Other&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;                               
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="news" href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I need to generate a drop-down(select) list using jQuery on page load.</p>
  
  <p>So far I have:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {        
  
          //build dropdown
          $("&lt;select /&gt;").appendTo("nav");
  
          // Create default option "Go to..."
              $("&lt;option /&gt;", {
              "selected": "selected",
              "value"   : "",
              "text"    : "Go to..."
              }).appendTo("nav select");  
  
              // Populate dropdowns with the first menu items
              $("nav li a").each(function() {
                  var el = $(this);
                  $("&lt;option /&gt;", {
                      "value"   : el.attr("href"),
                      "text"    : el.text()
                  }).appendTo("nav select");
              });
  
              //make responsive dropdown menu actually work           
              $("nav select").change(function() {
                  window.location = $(this).find("option:selected").val();
              });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This jQuery code does the job taking into account sub-menu items, but generated list does not indent submenu items in drop-down list.</p>
  
  <p>What I'd like to have is a " - " infront of drop-down list items (if they are actually original menu sub-menu items), so they could be easily identified.</p>
  
  <p>Hope this makes sense.</p>
  
  <p>Please advice,
  Thank you.</p>