Vertical Navigation Menu Problem
 

Hey everyone if someone could help me out, having some problems with a basic nav bar.

http://prntscr.com/jk4qm (basic nav bar looks like)
http://prntscr.com/jk4te (sub menu)

what it should start looking like however when i resize the browser the submenu moves around.
when i tried to make it display block, it appear underneath it but blocks the rest of the menu and there was 1 other thing i tried but it makes it so when you hover over the menu a large empty space appears under the "other services" ul

Thanks for the Help its greatly appreciated.

my html is this:

<nav>
<ul>
<li style="cursor: pointer;" onclick="document.location.href='index.html';">HOME</li>
<li style="cursor: pointer;" onclick="document.location.href='aboutus.html';">ABOUT US</li>
<li style="cursor: pointer;" onclick="document.location.href='courses.html';">COURSES</li>
<li>OTHER SERVICES
<ul id="dropdown">
<li style="cursor: pointer;" onclick="document.location.href='courses.html';">AGENCY</li>
<li style="cursor: pointer;" onclick="document.location.href='courses.html';">MAKEUP MECCA</li>
</ul>
</li>
<li style="cursor: pointer;" onclick="document.location.href='gallery.html';">GALLERY</li>
<li style="cursor: pointer;" onclick="document.location.href='faq.html';">FAQ</li>
<li style="cursor: pointer;" onclick="document.location.href='contactus.html';">CONTACT US</li>

and the CSS is:



* {
margin: 0;
}
html, body {
padding-top:15px;
height: 100%;
background-color:#000;
}
li, a{text-decoration:none; color:#FFF; font-family: "BebasNeue-webfont", Arial, Helvetica, sans-serif; font-size:24px;}
ul{text-decoration:none; list-style:none;}
nav li #dropdown{ position:absolute; left:27%}
nav li #dropdown li{color:#FFF; min-width:150px;}
nav li #dropdown li:hover{color:#F90;}
nav li:hover{margin-right:0px;}
a:hover{color:#F60;}
nav li{
background-color:#333;
border-bottom:3px ridge #000;
border-left:10px groove #FFF;
padding:15px;
margin-left:-40px;
margin-top:1px;
}
nav li:hover{
color: #ff9933;
}
nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
</ul>
</nav>

Tried several different ways this was the last one before i completely couldnt figure it out T__T

Tell the url of website.

dont have the website link yet, still building it. wont have the link till the domain is transferred from a previous host (which is a different website which is being scrapped for this new one)

whats the normal way to make a nav menu like this?
what parameters would normally be used?

normal dropdowns are fairly easy its just these one that have a sub menu appear horizontal to the parent that seem to give me issues.