Trouble with second nested menu - html

Question

I'm having an issue with adding a child menu to my first drop down menu. Basically this is the structure I am going for:
<ul id="nav" class="sixteen columns">
<li>Home</li>
<li>Portfolio
<ul>
<li>Asia
<ul>
<li>Korea</li>
<li>China</li>
<li>Japan</li>
</ul>
</li>
<li>Europe
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
</li>
</ul>
</li>
</ul>
And here is the CSS I am using:
#nav {
font-family: lanenar;
font-size: 1.2em;
z-index: 999;
position: relative;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-block;
background: #111;
}
#nav ul li {
float: left;
}
#nav ul li a {
padding: 5px 10px 5px 10px;
display: block;
color: #FFF;
text-decoration: none;
}
#nav ul li:hover {
background: #666;
}
#nav ul li:hover a {
color: #FFF;
}
#nav ul li:hover > ul { margin: 0px; padding: 0px;}
#nav ul li:hover > ul li { float: none; display: block;}
#nav ul li:hover > ul li a { color: #FFF; min-width: 150px;}
#nav ul li:hover > ul li a:hover {color: #FFF;}
#nav ul li {
position: relative;
}
#nav ul li ul {
position: absolute;
top: 28px;
left: 0px;
}
I am having a hard time figuring out what CSS I need to add to have the 2nd nested menu appear to the right when you mouseover Asia or Europe?
Any help would be much appreciated!

Answer 1

HTML
<ul id="nav" class="sixteen columns">
<li>Home
</li>
<li>Portfolio
<ul>
<li>Asia
<ul>
<li>Korea</li>
<li>China</li>
<li>Japan</li>
</ul>
</li>
<li>Europe
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
#nav {
width:800px;
margin:30px 50px;
padding: 0;
float:left;
}
#nav li {
list-style: none;
float: left;
padding:0 10px;
background-color:#367FB3;
color:white;
}
#nav li a:hover {
background-color:#52baff;
color:#fff;
}
//daf adf
/*--temp--*/
#nav ul ul li {
clear:left;
}
#nav ul ul {
position:absolute;
left:14em;
top:0;
}
#nav ul ul li a {
display:block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
/*--end temp--*/
#nav li a {
display: block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
#nav a:hover {
color:#367FB3;
}
#nav a:active {
color:#367FB3;
}
#nav li ul {
display: none;
width: 14em;
/* Width to help Opera out */
background-color:transparent;
z-index:666;
}
#nav li:hover ul, #nav li.hover ul {
display: block;
position: absolute;
margin:0px -10px;
padding:0px;
}
#nav li:hover ul ul {
display:none;
}
#nav li ul li:hover ul {
display:block
}
#nav li:hover li, #nav li.hover li {
float: none;
line-height:30px;
}
#nav li:hover li a, #nav li.hover li a {
background-color:#367FB3;
color:#fff;
font-size:13px;
font-family:"Lato" !important;
}
#nav li li a:hover {
background-color:#52baff;
color:#fff;
}
Working Fiddle
Added this to the Updated Fiddle as per SurjithSM suggestion
#nav li {
position: relative;
}
Updated Fiddle