HTML 5 navigation menu

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> <a href="index.html">Home</a></li>
  <li><a href="american.html">American</a></li>
    <ul class="submenu">
    <li> <a href="index.html">Speed</a></li>
    <li> <a href="index.html">Price</a></li>
    <li> <a href="index.html">Usability</a></li>
    </ul>
  <li><a href="foreign.html">Foreign</a></li>
    <ul class="submenu">
    <li> <a href="index.html">Speed</a></li>
    <li> <a href="index.html">Price</a></li>
    <li> <a href="index.html">Usability</a></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

HMTL

<nav>
  <ul class="topmenu">
  <li> <a href="index.html">Home</a></li>
  <li><a href="american.html">American</a>
    <ul>
        <li> <a href="index.html">Speed</a></li>
        <li> <a href="index.html">Price</a></li>
        <li> <a href="index.html">Usability</a></li>
      </ul>
      </li>
  <li><a href="foreign.html">Foreign</a>
        <ul>
        <li> <a href="index.html">Speed</a></li>
        <li> <a href="index.html">Price</a></li>
    <li> <a href="index.html">Usability</a></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

Answer 2

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> <a href="index.html">Home</a></li>
<li><a href="american.html">American</a>
<ul class="american-submenu">
        <li> <a href="index.html">Speed</a></li>
        <li> <a href="index.html">Price</a></li>
        <li> <a href="index.html">Usability</a></li>
    </ul>
</li>
<li><a href="foreign.html">Foreign</a>
 <ul class="foreign-submenu">
            <li> <a href="index.html">Speed</a></li>
            <li> <a href="index.html">Price</a></li>
            <li> <a href="index.html">Usability</a></li>
     </ul>
</li>
</ul>
</nav>