Disable links from auto created drop-down menu js

Question

Fixed:

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".

I would like these to be shown but disables, so not clickable.

JSFiddle

FIX: The only thing what had to be added so that it didn't linked "Something1/2" to non-exsisting pages was :

<a href="javascript:void(0)"></a>

HTML

<div class="nav">
    <nav>
        <ul>
            <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

            </li>
            <li> <a href="javascript:void(0)">Something1</a>

                <ul>
                    <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                    </li>
                    <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                    </li>
                </ul>
                <li><a href="javascript:void(0)">Something2</a>

                    <ul>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#contact" data-liquidslider-ref="main-slider">Actual Link</a>

                </li>
        </ul>
    </nav>
</div>

JS

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
    "selected": "selected",
        "value": "",
        "text": "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function () {
    var el = $(this);
    $("<option />", {
        "value": el.attr("href"),
            "text": el.text()
    }).appendTo("nav select");
});

$("nav select").change(function () {
    window.location = $(this).find("option:selected").val();
});

Is there any way to accomplish this?

Answer 1

The easiest way to create a blank link would be as followed,

<a href="#"></a>

or

<a href="javascript:void(0)"></a>

I'm not sure which is the best option but I recently started to use the second option. When you use the first option it will add the # symbol to the end of your url which can mess up active nav links.