Это мой HTML5 для панели навигации. Однако подменю не будет скрыто, и меню не будет отображаться горизонтально. Домашний, американский и иностранный, а также параметры верхнего меню, скорость, удобство использования и цена находятся в подменю. Однако иностранный отображается ниже, а не рядом с американским. Заранее спасибо.
<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;
}