DropDown Menu won't show for more than a secon

Question

Trying to make my own responsive mobile drop-down menu with its corresponding sub-menus.
So far I have the basic layout.
The user should be able to toggle between showing those sub-menus.
When "WORK" is clicked no other sub-menu should be open.
I've gone ahead and added the "display: none;" property to hide the sub-menus.
Trying to use jQuery to show() and hide() them when they are clicked.
I've looked around and test various methods. So far none worked. The code is as follows

HTML

<nav id="nav">
    <ul class="topLinksUL">
        <li class="topLinksLI"><a class="topLinksA" title="Home" id="home" href="">HOME</a>
            <ul class="abtDropUL">
                <li class="abtDropLI"><a class="dropLinksA" href=""></a></li>
            </ul>                           
        </li>
        <li class="topLinksLI"><a class="topLinksA" title="Work" id="wrk" href="">WORK</a> 
            <ul class="workDropUL">
                <li class="workDropLI"><a class="dropLinksA" href="">Projects</a></li>
                <li class="workDropLI"><a class="dropLinksA" href="">Education</a></li>
            </ul>
        </li>
        <li class="topLinksLI"><a class="topLinksA" title="About Me" id="abt" href="">ABOUT ME</a> 
            <ul class="abtDropUL">
                <li class="abtDropLI"><a class="dropLinksA" href="">Bio</a></li>
                <li class="abtDropLI"><a class="dropLinksA" href="">Interests</a></li>
            </ul>
        </li>
        <li class="topLinksLI"><a class="topLinksA" title="Contact Me" id="contact" href="">CONTACT&nbsp;ME</a>
            <ul class="contactDropUL">
                <li class="contactDropLI"><a class="dropLinksA" href="">Email</a></li>
            </ul>
        </li>
    </ul>
</nav><!-- ends nav -->

CSS

nav{
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

/* Centering the LIST ITEMS within the UL List ITems*/
nav ul li ul.workDropUL, nav ul li ul.abtDropUL, nav ul li ul.contactDropUL{
    padding-left: 0;
    display: none;

}
ul{
    margin: 0.2em 0;
}

body{
    font-family: 'PT Sans Narrow', sans-serif; 
}

jQuery

$('#wrk').click(function() {
    $(".workDropUL").show();

});

http://codepen.io/anon/pen/vEOJQQ - provided the link so you can test it out.

Methods tried
How do I hide the ul's that are not clicked and show submenu in Jquery?

How to fix this JQuery dropdown menu?

MAIN POINT
Some of these fixes do WORK but they only show the sub-menu for a second.
Is there something wrong with my code?

Answer 1

I believe you're looking for "preventDefault". Try something like this for your JS:

$('#wrk').click(function(evt) {
    evt.preventDefault();
    $(".workDropUL").show();
});

Edit: Here's the article about preventDefault() on the jQuery API site: http://api.jquery.com/event.preventdefault/

Answer 2

By default when you hit a anchor tag it looking for navigation if the herf="" it take reload the page.so you can handel the herf="#"(demo) or use span tag (demo)

<nav id="nav">
    <ul class="topLinksUL">
        <li class="topLinksLI"><a class="topLinksA" title="Home" id="home" href="">HOME</a>
            <ul class="abtDropUL">
                <li class="abtDropLI"><a class="dropLinksA" href=""></a></li>
            </ul>                           
        </li>
        <li class="topLinksLI"><span class="topLinksA" title="Work" id="wrk" href="">WORK</span> 
            <ul class="workDropUL">
                <li class="workDropLI"><a class="dropLinksA" href="">Projects</a></li>
                <li class="workDropLI"><a class="dropLinksA" href="">Education</a></li>
            </ul>
        </li>
        <li class="topLinksLI"><a class="topLinksA" title="About Me" id="abt" href="">ABOUT ME</a>
            <ul class="abtDropUL">
                <li class="abtDropLI"><a class="dropLinksA" href="">Bio</a></li>
                <li class="abtDropLI"><a class="dropLinksA" href="">Interests</a></li>
            </ul>
        </li>
        <li class="topLinksLI"><a class="topLinksA" title="Contact Me" id="contact" href="">CONTACT&nbsp;ME</a>
            <ul class="contactDropUL">
                <li class="contactDropLI"><a class="dropLinksA" href="">Email</a></li>
                <li class="contactDropLI"><a class="dropLinksA" href="">Facebook</a></li>
                <li class="contactDropLI"><a class="dropLinksA" href="">Instagram</a></li>
                <li class="contactDropLI"><a class="dropLinksA" href="">Linked&nbsp;In</a></li>
                <li class="contactDropLI"><a class="dropLinksA" href="">StackOverflow</a></li>
            </ul>
        </li>
    </ul>
</nav><!-- ends nav -->



$('#wrk').click(function() {
    $(".workDropUL").toggle();

});