title: Disable links from auto created drop-down menu js
body: <p>Fixed:</p>
  
  <p>So I got this piece of javascript that will show an drop-down menu when the browser is small enough (done with some @media). The menu is created automatically based on the menu for bigger screen sizes.  Now my issue is that it also creates links from "Something1" and "Something2".</p>
  
  <p>I would like these to be shown but disables, so not clickable. </p>
  
  <p><a href="http://jsfiddle.net/arashie/znf3u" rel="nofollow">JSFiddle</a></p>
  
  <p>FIX: The only thing what had to be added so that it didn't linked "Something1/2" to non-exsisting pages was : </p>
  
  <pre><code>&lt;a href="javascript:void(0)"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="nav"&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" data-liquidslider-ref="main-slider"&gt;Actual Link&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt; &lt;a href="javascript:void(0)"&gt;Something1&lt;/a&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#" data-liquidslider-ref="main-slider"&gt;Actual Link&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" data-liquidslider-ref="main-slider"&gt;Actual Link&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Something2&lt;/a&gt;
  
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#" data-liquidslider-ref="main-slider"&gt;Actual Link&lt;/a&gt;
  
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" data-liquidslider-ref="main-slider"&gt;Actual Link&lt;/a&gt;
  
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" data-liquidslider-ref="main-slider"&gt;Actual Link&lt;/a&gt;
  
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" data-liquidslider-ref="main-slider"&gt;Actual Link&lt;/a&gt;
  
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#contact" data-liquidslider-ref="main-slider"&gt;Actual Link&lt;/a&gt;
  
                  &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>// 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 a").each(function () {
      var el = $(this);
      $("&lt;option /&gt;", {
          "value": el.attr("href"),
              "text": el.text()
      }).appendTo("nav select");
  });
  
  $("nav select").change(function () {
      window.location = $(this).find("option:selected").val();
  });
  </code></pre>
  
  <p>Is there any way to accomplish this?</p>