CSS下拉菜單找不到問題

我已經查看了關於此主題已提出的所有問題，但無法找到與我的代碼有關的任何錯誤。我需要另一個人的眼睛來發現什麼是錯的。一定有什麼東西，我只是沒有看到，因爲我已經成功地進行了下拉菜單前...CSS下拉菜單找不到問題

這裏是我的HTML5編碼爲我的菜單：

<nav id="menu"> 
<ul> 
    <li><a href="index.html" class="currentnew">Home</a></li> 
    <li><a href="biography.html">Biography</a></li> 
    <li><a href="artwork.html">Artwork</a></li> 
     <ul> 
      <li><a href="paintings.html">Paintings</a></li> 
      <li><a href="drawings.html">Drawings</a></li> 
      <li><a href="sculpture.html">Sculpture</a></li> 
      <li><a href="viewall.html">View All</a></li> 
     </ul> 
    <li><a href="exhibitions.html">Exhibitions</a></li> 
    <li><a href="commissions.html">Commissions</a></li> 
</ul> 
</nav>

這裏是我的CSS樣式是試圖使一個下拉菜單：

/**** Main Menu ****/ 

#menu { 
background-image: url(../images/paintbanner.png); 
height: 55px; 
width: 793px; 
margin-left:125px; 
margin-top: -25px; 
} 

#menu ul a { 
color: #f7f5f1; 
} 

#menu ul a:hover { 
color: #635ccb; 
} 

#menu ul { 
margin-left: 75px; 
} 

#menu ul li { 
float: left; 
margin-right: 60px; 
font-family: "Bell MT", 
      serif; 
font-size: 1.1em; 
margin-top: 20px; 
} 

#menu ul ul { 
display: none; 
position: absolute; 
} 

#menu ul li:hover > ul { 
display: block; 
} 

#menu ul ul li { 
float: none; 
margin-top: 0; 
margin-right: 0; 
position: relative; 
background-image: url(../images/dropdown.png); 
height: 100%; 
width: 120px; 
} 

#menu ul ul a { 
color: #1e1b1b; 
font-size: .9em; 
}

來源

2014-01-08 user3175214

你的ul是ul的孩子，它應該站在裏面:) –

我知道這會是一件愚蠢的事情，非常感謝你！ :) – user3175214

不客氣 –

你關閉一個<li>之前，我想你的意思是。看看這裏：

<li><a href="artwork.html">Artwork</a></li> 
     <ul> 
      <li><a href="paintings.html">Paintings</a></li> 
      <li><a href="drawings.html">Drawings</a></li> 
      <li><a href="sculpture.html">Sculpture</a></li> 
      <li><a href="viewall.html">View All</a></li> 
     </ul>

也許應該是：

<li> 
     <a href="artwork.html">Artwork</a> 
     <ul> 
      <li><a href="paintings.html">Paintings</a></li> 
      <li><a href="drawings.html">Drawings</a></li> 
      <li><a href="sculpture.html">Sculpture</a></li> 
      <li><a href="viewall.html">View All</a></li> 
     </ul> 
</li>

來源

2014-01-08 22:07:08 scrappedcola

這是因爲li:hover應該使<ul>與display:block的出<li>

試試這個：

<nav id="menu"> 
<ul> 
    <li><a href="index.html" class="currentnew">Home</a></li> 
    <li><a href="biography.html">Biography</a></li> 
    <li><a href="artwork.html">Artwork</a> 
     <ul> 
      <li><a href="paintings.html">Paintings</a></li> 
      <li><a href="drawings.html">Drawings</a></li> 
      <li><a href="sculpture.html">Sculpture</a></li> 
      <li><a href="viewall.html">View All</a></li> 
     </ul> 
    </li> 
    <li><a href="exhibitions.html">Exhibitions</a></li> 
    <li><a href="commissions.html">Commissions</a></li> 
</ul> 
</nav>

例如：http://jsfiddle.net/9zfsr/

來源

2014-01-08 22:08:28 Deharlan

CSS下拉菜單找不到問題

回答

相關問題