onClick Dropdown menu Responsive Website

Question

I'm working on making my site responsive and so I needed to have a decent menu for the mobile view. So i got myself a button which only pops up when im in 480px or lower which is good. But the problem is: Making the menu drop down won't work. All I need is an simple dropdown menu but i cant manage to make it work.

jQuery Link:

 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

HTML:

<ul id="mobimenu">
    <a href="#menu">
    <img src="threelines.png" alt="menu button">
    </a>
    <div id="mobidrop">
        menu comes here
    </div>
</ul>

CSS:

        #mobimenu{
            display: none;
        }

        #mobidrop{
            display:none;
        }

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

    #mobimenu {
        display: block;
        float: right;
    }

    #mobidrop{

        width: 100px;
        height:50px;
        background-color: red;
    }

}

jQuery:

$(function(){$("#mobimenu").on('click', function() {
   $("#mobidrop").show();
});

Answer 1

You are missing some closing quotes/parenthesis in the jQuery code..

It should be

$(function(){
    $("#mobimenu").on('click', function() {
      $("#mobidrop").show();
   });
});

Demo at http://jsfiddle.net/Wj8k5/
( make the window small so you can see the mobile version )