title: Dropdown Menu for Small Screens not linking well
body: <p>I have my menu as:</p>
  
  <pre><code>&lt;nav&gt; 
      &lt;ul&gt; 
          &lt;li&gt;
              &lt;a href="#"&gt;Home&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt; 
          &lt;li&gt;&lt;a href="#books"&gt;Books&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="#blog"&gt;Blog&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt; 
          &lt;li&gt;&lt;a href="#about"&gt;About Us&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="#support"&gt;Support&lt;/a&gt;&lt;/li&gt; 
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and a supporting JQuery to help fire the functionality as:</p>
  
  <pre><code>$(function() {
      // Create the dropdown base
      $("&lt;select /&gt;").appendTo("nav");
      // Create default option "Go to..."
      $("&lt;option /&gt;", {
          "selected": "selected",
          "value": "",
          "text": "Go to..."
      }).appendTo("nav select");
      // Populate dropdown with menu items
      $("nav &gt; ul &gt; li").each(function() {
          var el = $(this);
          var hasChildren = el.find("ul"),
                  children = el.find("li");
          if (hasChildren.length) {
              $("&lt;optgroup /&gt;", {
                  "label": el.find("&gt; a").text()
              }).appendTo("nav select");
              children.each(function() {
                  $("&lt;option /&gt;", {
                      "text": " - " + $(this).text()
                  }).appendTo("optgroup:last");
              });
          } else {
              $("&lt;option /&gt;", {
                  "value": el.attr("href"),
                  "text": el.text()
              }).appendTo("nav select");
          }
      });
      // To make dropdown actually work
      $("nav select").change(function() {
          window.location = $(this).find("option:selected").val();
      });
  });
  </code></pre>
  
  <p>The problem here is that when I select any of the menus it does not link properly. The returned URL on the browser is eg <code>www.example.com/One</code> instead of <code>www.example.com/#</code></p>
  
  <p>Can someone tell me what's wrong with my code.</p>