懸停的子菜單

我試圖做一個懸停幾個小時的子菜單，閱讀大約十個教程或更多，最後不讓它工作。我想讓它在垂直菜單中顯示「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/

希望能對你有所幫助。謝謝

來源

2014-11-23 BrianMiké

你的'ul'不是你的層次結構的一部分。所以你說'li：hover ul'不適用於任何元素。如果你使它成爲可以工作的'li'的孩子，或者你可以說'li：hover + ul'，它將直接跟在'li'後面的'ul'。 – Chad 2014-11-23 03:22:42

這應該讓你在你的路上http://jsfiddle.net/AuJeF/446/ – Chad 2014-11-23 03:26:26

這是我需要找到我的方式。非常感謝！ – 2014-11-23 04:00:57

您對您的標記問題，變化以下各項

 <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

來源

2014-11-23 03:57:37 Rasel

正是我需要的。謝謝：） – 2014-11-23 04:03:41

你的錯誤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這不是真的，只能有>李想，我幫助ü

來源

2014-11-23 03:56:30

謝謝你的幫助:) – 2014-11-23 04:03:16

懸停的子菜單

回答

相關問題