JSFiddle - React, Tailwind, and code Playground

HTML

<!--- 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">

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

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

CSS

/* The css was copied from another site; my efforts to prune items may have left a few that are unnecessary; apologies if the inconsistencies are glaring. */
ul.Menu ul{ display:none; }
ul.Menu li:hover>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.sep a:hover {
	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{ position:relative; }
ul.Menu li a:hover{
	position:relative;
	background-color:#0000FF;
	border-color:#665500;
	border-style:solid;
	font:bold 15px Trebuchet MS;
	color: #ffffff;
	text-decoration:none;
}

JavaScript

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