悬停的子菜单

Question

我试图做一个悬停几个小时的子菜单，阅读大约十个教程或更多，最后不让它工作。 我想让它在垂直菜单中显示“Zimmer”，“Reservierung”和“Preise”，如果我悬停“Hotel”等等。 这是我的代码：

a { 
 
    text-decoration: none;} 
 
nav { 
 
\t height: 50px; 
 
\t clear: both;} 
 
nav ul { 
 
\t padding: 5px 0px; 
 
\t text-align: center;} 
 
nav li { 
 
\t margin: 0px; 
 
\t display: inline; 
 
\t padding: 0px;} 
 
nav li a { 
 
\t font-size: 18px; 
 
\t color: #775923; 
 
\t padding: 0px 20px; 
 
\t margin: 0px;} 
 
nav li a:hover, nav li a.current { 
 
\t color: #775923; 
 
    padding: 0px 20px 14px 20px; 
 
\t -webkit-padding-after: 15px; 
 
\t box-shadow: 0 4px #b1d130;} \t 
 
nav ul ul{ 
 
\t display: none;} \t 
 
nav ul li:hover ul { 
 
    display: block;}

<nav> 
 
    \t <ul> 
 
      <li><a href="#" class="current">Willkommen</a></li> 
 
      <li><a href="#">Hotel</a></li> 
 
      \t <ul> 
 
        <li><a href="#">Zimmer</a></li> 
 
        <li><a href="#">Reservierung</a></li> 
 
        <li><a href="#">Preise</a></li> 
 
       </ul> 
 
      <li><a href="#">Restaurant</a></li> 
 
      \t <ul> 
 
        <li><a href="#">Speisekarte</a></li> 
 
        <li><a href="#">Anlässe</a></li> 
 
       </ul> 
 
      <li><a href="#">Anfahrt</a></li> 
 
      <li><a href="#">Kontakt</a></li> 
 
      \t <ul> 
 
        <li><a href="#">Team</a></li> 
 
        <li><a href="#">Über Uns</a></li> 
 
       </ul>   \t   
 
     \t </ul> 
 
</nav>

链接：http://jsfiddle.net/AuJeF/445/

希望能对你有所帮助。 谢谢

Answer 1

您对您的标记问题， 变化以下各项

 <li><a href="#">Hotel</a> 
      <ul> 
       <li><a href="#">Zimmer</a></li> 
       <li><a href="#">Reservierung</a></li> 
       <li><a href="#">Preise</a></li> 
      </ul> 
     </li> 

（这是一个简单的下拉菜单）

<nav> 
     <ul> 
      <li><a href="#" class="current">Willkommen</a></li> 
      <li><a href="#">Hotel</a> 
       <ul> 
        <li><a href="#">Zimmer</a></li> 
        <li><a href="#">Reservierung</a></li> 
        <li><a href="#">Preise</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Restaurant</a><ul> 
        <li><a href="#">Speisekarte</a></li> 
        <li><a href="#">Anlässe</a></li> 
       </ul> 
      </li> 
     </ul> 
</nav> 

CSS

nav 
{ 
    margin-top:15px 
} 

nav ul 
{ 
    list-style:none; 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 

nav ul a 
{ 
    display:block; 
    color:#333; 
    text-decoration:none; 
    font-weight:700; 
    font-size:12px; 
    line-height:32px; 
    padding:0 15px; 
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif 
} 

nav ul li 
{ 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 

nav ul li.current-menu-item 
{ 
    background:#ddd 
} 

nav ul li:hover 
{ 
    background:#f6f6f6 
} 

nav ul ul 
{ 
    display:none; 
    position:absolute; 
    top:100%; 
    left:0; 
    background:#fff; 
    padding:0 
} 

nav ul ul li 
{ 
    float:none; 
    width:200px 
} 

nav ul ul a 
{ 
    line-height:120%; 
    padding:10px 15px 
} 

nav ul ul ul 
{ 
    top:0; 
    left:100% 
} 

nav ul li:hover > ul 
{ 
    display:block 
} 

jsfiddle

Answer 2

你的错误html。 ul> ul桅杆可能会导致li。但不外乎

<li><a href="#">Hotel</a> 
       <ul> 
        <li><a href="#">Zimmer</a></li> 
        <li><a href="#">Reservierung</a></li> 
        <li><a href="#">Preise</a></li> 
       </ul> 
</li> 

你在写样式 - 如果ul里面然后ul显示块。但是在他之后却没有。 将验证错误，因为里面>标签UL UL这不是真的，只能有>李 想，我帮助ü