HTML 5导航菜单

Question

这是我的HTML5导航栏。但是，子菜单不会隐藏，菜单不会水平显示。家庭，美国和外国和topmenu选项和速度，可用性和价格是submeny。但Foriegn显示在下面，而不是在美国旁边。先谢谢你。

<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

解决：

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> 

Answer 2

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; 
} 

小提琴Demo