HTML 5 navigation menu - html

Question

This is my HTML5 for nav bar. However, the submenu will not hide and the menu will not display horizontally. Home, American and Foreign and the topmenu options and speed,usability and price are submeny. However Foriegn is displaying below and not next to American. Thank you in advance.
<nav>
<ul class="topmenu">
<li> Home</li>
<li>American</li>
<ul class="submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
<li>Foreign</li>
<ul class="submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</ul>
</nav>
CSS
nav{
position: relative;
background-color: #00baff;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.topmenu li{
position: relative;
list-style-type: none;
font-size: 20px;
display: inline-block;
margin-right: 30px;
color: white;
}
.topmenu li a{
padding: 5px;
}
.topmenu a:link{
text-decoration: none;
color: #ffffff;
}
.topmenu a:visited{
text-decoration: none;
color: white;
}
.topmenu a:hover{
background-color: #ffffff;
}
.topmenu li .submenu li{
display: none;
list-style-type: none;
}
.topmenu li:hover .submenu li{
display: block;
position: relative;
}
Fiddle

Answer 1

SOLVED:
CSS:
nav{
position: relative;
background-color: #00baff;
width: 50%;
margin-left: auto;
margin-right: auto;
}
/* This is your main UL resize to fit */
.topmenu{
width: 100%;
height: 150px;
}
/* I used > li to target all elements of .topmenu */
.topmenu > li{
font-size: 20px;
margin-right: 10px;
color: white;
list-style:none;
display:inline;
float: left;
}
.topmenu > li a{
padding: 5px;
}
.topmenu a:link{
text-decoration: none;
color: #ffffff;
}
.topmenu a:visited{
text-decoration: none;
color: white;
}
.topmenu a:hover{
background-color: #ffffff;
}
/* new code
What this does is it targets all child UL elements on li:hover
if they have them they will become VISIBLE if not nothing happens */
.topmenu > li:hover >ul{
visibility:visible;
}
/* your two sub menus set to hidden */
.american-submenu{
visibility:hidden;
}
.foreign-submenu{
visibility:hidden;
}
HTML
<nav>
<ul class="topmenu">
<li> Home</li>
<li>American
<ul class="american-submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
<li>Foreign
<ul class="foreign-submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
</ul>
</nav>

Answer 2

HMTL
<nav>
<ul class="topmenu">
<li> Home</li>
<li>American
<ul>
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
<li>Foreign
<ul>
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
</ul>
</nav>
CSS
nav{
position: relative;
background-color: #00baff;
width:100%;
}
.topmenu ul {
list-style:none;
}
.topmenu li {
float:left;
position:relative;
list-style-type: none;
font-size: 20px;
display: inline-block;
background-color: #00baff;
color: white;
text-align:center;
padding:5px;
}
.topmenu li ul {
display:none;
position:absolute;
text-decoration:none;
}
.topmenu li:hover ul{
display:block;
background-color: #00baff;
color:white;
height:auto;
width:8em;
}
.topmenu li ul li{
clear:both;
border-style:none;}
.topmenu li a{
padding: 5px;
}
.topmenu a:link{
text-decoration: none;
color: #ffffff;
}
.topmenu a:visited{
text-decoration: none;
color: white;
}
.topmenu a:hover{
background-color:white ;
color:#00baff;
}
Fiddle Demo