Hide CSS menu on click

Question

Any idea how I can hide this dropdown when any item is clicked on? return it to its resting state? I want it to be hidden mainly for mobile users. It works fine as is right now, but on mobiles it stays open until another element of the page "happens" to be clicked on.

HTML

    <div class="menubar">
<ul class="menu">
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li>
<li class="menu"><div onClick="">PRODUCTS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li>
    <li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li>
    <li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li>
    <li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li>
    <li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li>
    <li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li>
    </ul>
</li>
<li class="menu"><div onClick="">DOWNLOADS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li>
    <li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li>
    </ul>
</li>
<li class="menu"><div onClick="">DEALERS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li>
    <li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li>
    </ul>
</li>
<li class="menu"><div onClick="loadPage('about.html');">ABOUT</div></li>
<li class="menu"><div onClick="loadPage('contact.html');">CONTACT US</div></li>
</ul>
</div>

CSS

ul.menu {z-index: 1000; text-align: center; margin: 0; padding: 0px; list-style: none; display: inline; color: #FFFFFF;}
ul.menu li.menu {z-index: 1000; color: #FFFFFF; line-height: 40px; padding-left: 15px; padding-right: 15px; font-family: Arial, 

Helvetica, sans-serif; font-weight: bold; position: relative; background: #000000; cursor: pointer; display: inline-block;}
ul.menu li.menu:hover{z-index: 1000; background: #505050; color: #FFFFFF;}
ul.menu li.menu ul.menu{z-index: 1000; color: #FFFFFF; left: 0; padding:0; position: absolute; width: 160px; visibility: hidden; 

display: none; border: 1px #000000 solid; border-bottom: none;}
ul.menu li.menu ul.menu li.menu{z-index: 1000; font-size: 12pt; padding: 4px; text-align: left; background: #F97300; display: 

block; color: #FFFFFF; border-bottom: 1px #000000 solid; line-height: 30px;}
ul.menu li.menu ul.menu li.menu:hover{z-index: 1000; background: #E0E0E0; color: #000000;}
ul.menu li.menu:hover ul.menu{z-index: 1000; display: block; visibility: visible; opacity: .8;}

jsfiddle http://jsfiddle.net/omvvL5z5/1/

Answer 1

Use the JQuery $(".menubar").toggle() function inside a function you call when you click on a item. http://api.jquery.com/toggle/

This is the code I tried on jsfiddle: Try three

    <div class="menubar">
<ul class="menu">
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li>
<li class="menu"><div onClick="" class = "button">PRODUCTS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li>
    <li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li>
    <li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li>
    <li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li>
    <li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li>
    <li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li>
    </ul>
</li>
<li class="menu"><div onClick="" class = "button">DOWNLOADS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li>
    <li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li>
    </ul>
</li>
<li class="menu"><div onClick="" class = "button">DEALERS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li>
    <li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li>
    </ul>
</li>
<li class="menu"><div onClick="loadPage('about.html');" class = "button">ABOUT</div></li>
<li class="menu"><div onClick="loadPage('contact.html');" class = "button">CONTACT US</div></li>
</ul>
</div>

Then just put in your other jquery

instead of what I did try

$('.menu > ul > li').click(function() {
$('.menu > ul.menu').toggle();
});
$('.button').hover(function(){$('.menu > ul.menu').show();});

You may also use something like bootstrap: http://getbootstrap.com/components/#navbar

Answer 2

Please give this CSS for mobile css

   .menubar{
            display:none;
}