fix responsive mobile menu - html

Question

i have a menu i'm developing at this link:
http://events.discoverportland.net/
The menu should load to a blue square just to the right of the discover portland logo. There are serveral nested ul's in the menu, the problem i'm having is getting them to load to the side of the menus above them As it load now, you can't get to the teritairy links unless you move VERY fast.
Is there any way to get the uls to load inline as i'm hovering over them, or is there a better solution?
this my nav html:
<nav>
<div class="clearfix hd8 suckerfish" >
<ul id="md">
<li>Home2</li>
<li>Neighborhoods
<ul>
<li>Northwest
<ul>
<li>Pearl District</li>
<li>Oldtown-Chinatown </li>
<li>Nob Hill</li>
</ul>
</li>
<li>Southwest
<ul>
<li>West End</li>
<li>Riverplace-South Waterfront</li>
<li>Downtown</li>
</ul>
</li>
<li>Southeast
<ul>
<li>Sellwood-Westmoreland</li>
<li>Hawthorne</li>
<li>Clinton-Division</li>
</ul>
</li>
<li>Northeast
<ul>
<li>Alberta</li>
<li>Lloyd District</li>
<li>Hollywood District</li>
</ul>
</li>
<li>North
<ul>
<li>Mississippi</li>
<li>Williams</li>
<li>St. Johns</li>
</ul>
</li>
</ul>
</li>
<li>Itineraries</li>
<li>Day Trips</li>
<li>Food+Drink
<ul>
<li>Dining Picks</li>
<li>Food Cart Fare </li>
<li>Beer, Wine & Spirits</li>
<li>Café Culture</li>
</ul>
</li>
<li>To Do
<ul>
<li>Shopping</li>
<li>Recreation</li>
<li>Culture
<ul>
<li>Galleries</li>
</ul>
</li>
<li>Family</li>
</ul>
</li>
<li>Events</li>
</ul>
</nav>
this is the css i'm using:
nav ul ul li a::before {
content: "\f0da";
font-family: FontAwesome;
margin-right: 8px;
}
nav {
text-transform:uppercase;
font-family: Oswald,Arial,Helvetica,sans-serif !important;
font-size: 14px;
font-weight: 100 !important;
letter-spacing: 1px!important;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FF0066;
padding: 2px 0 0 64px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #FF0066;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 15px 20px;
color: #fff; text-decoration: none;
}
nav ul ul {
background: #FF0066; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 25px;
color: #fff;
font-family: 'Fira Sans', sans-serif;Important;
font-size: 12px;
}
nav ul ul li a:hover {
background: #AD0548;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul ul ul li {
width: 275px !important;
}
#media (max-width: 767px) {
#logo a {
background: rgba(0, 0, 0, 0) url("http://discoverportland.net/templates/urbanlife/images/logos/DP_HeadingLogo2.png") no-repeat scroll 0 0 / 100% auto;
height: 60px;
margin: 0 !important;
width: 60px !important;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover #md {
display: inline-block;
}
}