 <p>First thing, you should fix up your markup, your nesting is wrong:</p> <pre><code>&lt;nav&gt; &lt;ul&gt; &lt;li id="menu_toggle"&gt;Menu&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link 01&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link 02&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link 03&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>And change your CSS to something like this:</p> <pre><code>nav li { display: none; } nav.open li, nav:hover li, #menu_toggle { display: block; } </code></pre> <p>This means all your list items are invisible, but for the toggle and if the nav has a class <code>open</code>, or if the mouse hovers the nav (on a desktop).</p> <p>Then your JavaScript (jQuery) could look like this:</p> <pre><code>$(function(){ // document ready $('#menu_toggle').on('touchstart', function(){ $('nav').toggleClass('open'); }); }); </code></pre> <p>This will toggle the menu on a touch device when <code>hover</code> isn't really working.</p> <p>Tracking a touch anywhere else but the menu is a bit trickier, you could:</p> <ol> <li>Add a once off event handler to the rest of the document whenever you open the menu</li> <li>Put an overlay between the menu and your content and catch events on that</li> </ol> <p>So for option 1, assuming you have something like this:</p> <pre><code>&lt;nav&gt;...&lt;/nav&gt; &lt;div id="content"&gt;...&lt;/div&gt; </code></pre> <p>You could do this:</p> <pre><code>$(function(){ // document ready var isMenuOpen = false; $('#menu_toggle').on('touchstart', function(){ // reverse boolean isMenuOpen = !isMenuOpen; // add/remove class depending on state $('nav').toggleClass('open', isMenuOpen); if( isMenuOpen ){ // If menu is now open, add a closing event handler to the content $('#content').once('touchstart', function(){ $('nav').removeClass('open'); }); } }); }); </code></pre>