List items as dropdown menu: fails on Safari

Question

I'm using list items for a dropdown menu, originally with :hover. Works well with mouseovers on desktop, but not touchscreen taps. First implemented advice to simulate the hover state with JavaScript here (referred by @z0r):

$('body').bind('touchstart', function() {});  

Then, all :hover selectors were duplicated as :active, eg:

ul.Menu li:hover>ul,  
ul.Menu li:active>ul {display:block;}  

Although the submenu displays on iPhones (Safari) with a menu tap, it can't be selected: the submenu disappears. Here's a fiddle: http://jsfiddle.net/7jfo9x8h/2.

I'm not sure if the problem is browser/OS specific, but I think it works on Android/Chrome. Any solutions need to be tested on iPhone (I do not own one). Thanks in advance!

Second Q: I used cursor:pointer within css to show the box around MENU is clickable [thanks @DOC ASAREL, great tip]. But with html below and css shown in fiddle (updated code: http://jsfiddle.net/7jfo9x8h/9), only the text is clickable/hoverable. What css mods are needed to make the full box active (click & hover)? Many thanks.

<ul class="Menu">
  <li>MENU
   <ul>
    <li><a href="...  

Answer 1

The :active lines are not needed anymore with this solution. They anyway solve only half the problem.

$('body').bind('touchstart', function() {});

var down = function() {
    $('ul.Menu li ul').slideDown(100)
    $('ul.Menu li').one('click', up)
}
    
var up = function() {
    $('ul.Menu li ul').slideUp(100)
    $('ul.Menu li').one('click', down)
} 

$('ul.Menu li').one('click', function() {
    down()
})

/* The css copied from another site;  efforts to prune items may have left a few that are unnecessary */
ul.Menu ul{ display:none; }
ul.Menu li:hover>ul,
ul.Menu li:active>ul{ display:block; }
ul.Menu ul { 
    position: absolute;
    left:-1px;top:98%; 
}
ul.Menu,ul.Menu ul {
 list-style:none;
 padding:0px 2px 2px 0px;
 background-color:#E3D8E3;
 border-width:1px;
 border-style:solid;
}
ul.Menu { float: left; }
ul.Menu li{ margin:0px 10px 0px 5px; }
ul.Menu a, ul.Menu li.dis a:hover,
           ul.Menu li.dis a:active,
ul.Menu li.sep a:hover,
ul.Menu li.sep a:active {
 display:block;
 border-width:0px;
 padding:4px;
 padding-left:5px;
 padding-right:0px;
 font:bold 15px Trebuchet MS;
 color: #050505;
 text-decoration:none;
}
ul.Menu ul li { float:none; }
ul.Menu ul a { white-space:nowrap; }
ul.Menu li:hover,
ul.Menu li:active{ position:relative; }
ul.Menu li a:hover,
ul.Menu li a:active{
 position:relative;
 background-color:#0000FF;
 border-color:#665500;
 border-style:solid;
 font:bold 15px Trebuchet MS;
 color: #ffffff;
 text-decoration:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--- bootstrap (used for the full version of the site) -->
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<p>
<ul class="Menu">
  <li><font style="font-size:20px;">MENU</font>
  <ul>
     <li><a href="http://cnn.com">Sub 1</a></li>
     <li><a href="http://cnn.com">Sub 2</a></li>
     <li><a href="http://cnn.com">Sub 3</a></li>
     <li><a href="http://cnn.com">Sub 4</a></li>
     <li><a href="http://cnn.com">Sub 5</font></a></li>
     <li><a href="http://cnn.com">Return Home</a></li>
  </ul>
  </li>
</ul>

You need a one trigger, because you need to change the event that happens on click on the same element. Is that what you need? %)P

Second question

You had to add the click event to ul.Menu. And add position:relative to ul.Menu.

Like in the FIDDLE: http://jsfiddle.net/7jfo9x8h/10/.