Issues with custom navigation and displaying submenu on hover - html

Question

I've been trying to get this menu system to work for a good while now and am after looking at a number of different solutions but nothing seems to be working for me.
At the moment the submenu is appearing when hovering over the top level menu but if I try to move the mouse down to the submenu it disappears again as soon as my mouse leaves the top level.
Also when it does show it is showing behind some of the other page content, I think his might be because I have the page header which contains the navigation in a seperate include() file.
Any help with this would be greatly appreciated, my code is as follows:
HTML:
<div id="nav">
<ul>
<li>Menu
<ul>
<li>category</li>
<li>category</li>
<li>category</li>
</ul></li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Hello,</li>
<li>Sign in</li>
<li>country</li>
<li>cart</li>
</ul>
</div>
CSS:
#nav{
height:50px;
}
#nav > ul{
list-style:none;
padding:0px;
margin:0px;
vertical-align:top;
}
#nav > ul:nth-child(1){
float:left;
height:50px;
line-height:50px;
font-weight:bold;
}
#nav > ul:nth-child(2){
float:right;
height:50px;
line-height:50px;
}
#nav > ul > li {
display: inline-block;
vertical-align:top;
}
#nav > ul:nth-child(1) > li{
width:100px;
}
#nav > ul:nth-child(2) > li{
padding-left:10px;
}
#nav > ul > li > ul{
display:none;
}
#nav > ul > li:hover > ul{
display:block;
z-index:5;
padding:0px;
margin:0px;
width:200px;
}
#nav > ul > li:hover > ul > li{
background: #fff;
border:1px solid #bbb;
display:block;
padding:10px;
line-height:16px;
font-weight:normal;
}
#nav > ul > li:hover > ul > li > a{
color:#333;
}

Answer 1

You are almost done, you need to set a z-index, and position: relative. This is because z-index needs to be set with a position (more information here and here).
#nav{
height:50px;
}
#nav > ul{
list-style:none;
padding:0px;
margin:0px;
vertical-align:top;
}
#nav > ul:nth-child(1){
float:left;
height:50px;
line-height:50px;
font-weight:bold;
}
#nav > ul:nth-child(2){
float:right;
height:50px;
line-height:50px;
}
#nav > ul > li {
display: inline-block;
vertical-align:top;
}
#nav > ul:nth-child(1) > li{
width:100px;
}
#nav > ul:nth-child(2) > li{
padding-left:10px;
}
#nav > ul > li > ul{
display:none;
}
#nav > ul > li:hover > ul{
display:block;
z-index:5;
padding:0px;
margin:0px;
width:200px;
}
#nav > ul > li:hover > ul > li{
background: #fff;
border:1px solid #bbb;
display:block;
padding:10px;
line-height:16px;
font-weight:normal;
background:red;
z-index:10;
position:relative;
}
#nav > ul > li:hover > ul > li > a{
color:#333;
}
<div id="nav">
<ul>
<li>Menu
<ul>
<li>category</li>
<li>category</li>
<li>category</li>
</ul></li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Hello,</li>
<li>Sign in</li>
<li>country</li>
<li>cart</li>
</ul>
</div>
<div>
Some content
</div>
Note that I've set a background color to see that works.