Mobile navigation links show up, but not functioning

See more:

Mobile

HTML5

navigation

, +

I've been working on a responsive site. I'm a newbie. I'm currently in an IT-Software Development program.

The website I'm developng has a main navigation (nav) as well as a mobile navigation (#mobileNav) that becomes visible for small device sizes.

The mobile nav menu shows up fine and drops down the way it should, but when I click on a link in the mobile nav sub menu, I'm not redirected as I should be and remain on the page I'm on...

Any help would be greatly appreciated!

PS: This is my first question here on CodeProject :)

OK, here's the code...

<nav>

    <div id="mobileWelcomeText">
        <h3>Welcome To Our Website!</h3>
    </div>

    <ul>
        <li><a href="index.html">HOME</a></li>
        <li class="linkPipe">|</li>
        <li><a href="products.html">PRODUCTS</a></li>
        <li class="linkPipe">|</li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li class="linkPipe">|</li>
        <li><a href="testimonials.html">TESTIMONIALS</a></li>
        <li class="linkPipe">|</li>
        <li><a href="contact.html">CONTACT</a></li>
    </ul>

    <!--drop-down menu for mobile sizes-->
    <div id="mobileNav">

        <form action="#" class="mobileNav">            
            <select class="button">
                <option value="/">
                    Navigate...
                </option>
                <option class="subMenu" value="index" href="index.html">
                    HOME
                </option>
                <option class="subMenu" value="products" href="products.html">
                    PRODUCTS
                </option>
                <option class="subMenu" value="gallery" href="gallery.html">
                    GALLERY
                </option>
                <option class="subMenu" value="testimonials" href="testimonials.html">
                    TESTIMONIALS
                </option>
                <option class="subMenu" value="contact" href="contact.html">
                    CONTACT
                </option>
            </select>             
        </form>

    </div><!-- end div #mobileNav" -->

</nav><!-- end nav -->

What I have tried:

everything I can think of. I'm thinking the problem may lie in the path I've specified, but can't figure out the correct syntax...