CSS/Jquery - Navigation dropdown when viewing on mobile/tab

Question

I have a navigation bar with a drop-down hover on the sub menu which works fine on a desktop but doesn't work very well on a mobile device as it covers all the other tabs and also doesn't work well on a touch-screen, as soon as you take your finger off the dropdown the hover will disappears. I would like to be able to click the dropdown on the sub-menu and then stay there in a line. much like the navigation itself when in mobile view.

Jsfiddle Demo

---

HTML

<nav class="clearfix">
<div class="menu-main-menu-container">
    <ul class="menu" id="menu-main-menu-1">
        <li class=
        "menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-86">
        <a href="#">Home</a>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-148">
        <a href="#">other tab</a>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-149">
        <a href="#">dropdown</a>
            <ul class="sub-menu">
                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-320">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-321">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-322">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-323">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-324">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-327">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-328">
                <a href="#">other sub tab</a>
                </li>
            </ul>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-136">
        <a href="#">other tab</a>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-147">
        <a href="#">other tab</a>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-7">
        <a href="#">other tab</a>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-58">
        <a href="#">other tab</a>
        </li>
    </ul>
</div>
<a href="#" id="pull">Menu</a>

CSS

nav {
    height:40px;
    width:100%;
    color:#fff;
    background:#86c024;
    font-size:11pt;
    position:relative
}

nav a {
    color:#fff;
    display:inline-block;
    width:auto;
    text-align:center;
    text-decoration:none;
    line-height:40px
}

nav ul {
    padding:0;
    margin:0 auto;
    max-width:1000px;
    width:100%
}

nav li {
    display:inline;
    float:left;
    height:40px;
/* this should be the same as your nav height */
    position:relative
/* this is needed in order to position sub menus */
}

nav li a {
    padding:0 15px;
    border-right:1px solid #fff;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
}

nav a:hover {
    background:#2098d1;
    color:#fff;
    width:100%
}

nav ul ul {
/* this targets all sub menus */
    display:none;
/* hide all sub menus from view */
    position:absolute;
    left:0;
    top:40px
/* this should be the same height as the top level menu -- height + padding + borders */
}

nav li li a {
    border:none;
    font-size:10pt
}

nav ul ul li {
/* this targets all submenu items */
    float:none;
/* overwriting our float up above */
    width:100px
/* This needs to match the value we set below */
}

nav ul ul li a {
/* target all sub menu item links */
    padding:5px 10px
}

nav ul li:hover > ul {
    display:inline-block;
/* show sub menus when hovering over a parent */
    background:gray;
    text-align:center;
    border:0;
    z-index:100
}

nav li a:link,a:visited {
    color:#fff
}

nav li:last-child a {
    border-right:0
}

nav ul li.current-menu-item a:link,nav ul li.current-menu-item a:visited,nav ul li.current-page-ancestor a:link,nav ul li.current-page-ancestor a:visited {
    font-weight:700;
    background:#2098d1;
    color:#fff
}

nav #pull {
    display:none
}

@media screen and (max-width: 600px) {
nav {
    height:auto
}

nav ul {
    width:100%;
    display:block;
    height:auto
}

nav li {
    width:100%;
    float:left;
    position:relative
}

nav li a {
    border-bottom:1px solid #fff;
    border-right:1px solid #fff
}

nav a {
    text-align:left;
    width:100%;
    text-indent:25px
}
}

@media only screen and (max-width : 600px) {
nav {
    border-bottom:0
}

nav ul {
    display:none;
    height:auto
}

nav #pull {
    display:inline-block;
    background:#86c024;
    width:100%;
    position:relative
}

nav #pull:after {
    content:"";
    background:red;
    width:30px;
    height:30px;
    display:inline-block;
    position:absolute;
    right:15px;
    top:10px
}
}

@media only screen and (max-width : 320px) {
nav ul li ul li {
    width:100%;
    height:auto
}

nav li {
    display:block;
    float:none;
    width:100%
}

nav li a {
    border-bottom:1px solid #576979
}
}

Javascript

$(function() {
        var pull        = $('#pull');
            menu        = $('nav .menu');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });

Answer 1

First of all you needed to correct some HTML, css and JS thing.

1) I kept your a menu opener tag before ul.

2) then disabled css menu hover open in 600 and 320 view

3) binded jquery click event if it has subchild menu.

$(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
});

You can view the below jsFiddle AND compare with your ones.

View Here

And I will suggest you, if you are newer then use bootstrap. It will be helpful for you. And will help you for faster developing.

Else if you were trying to learn, then it was good try. But remember there is always a chance of improvement.

Answer 2

Add id for dropdown tag it's helps to get correct sub menu

  $('#dropdown_submenu').click(function(){
       $(this).next().toggle();
  });

Add this to css

@media only screen and (max-width : 600px) {

     nav ul li:hover > ul {
      display: none; 
    }
   nav ul li > ul{
        background: gray;
      text-align: center;
      border: 0;
      z-index: 100;
    }
}
@media only screen and (max-width : 320px) {

    nav ul li:hover > ul {
      display: none; 

    }
     nav ul li > ul{
        background: gray;
      text-align: center;
      border: 0;
      z-index: 100;
    }

}

check this : jsfiddle