下拉菜單定位

Question

我試圖用CSS創建一個下拉菜單，並且我已經成功隱藏了下拉菜單，但一直未能使其重新出現。我很確定問題出在：hover標籤，我已經從這裏取出了css標籤，因爲我一直無法使它工作。幫助與CSS？請？絕望。

HTML代碼：

<div id="navigation"> 
    <ul id="menu"> 
     <li class="menu"><a href="#home">Home</a></li> 
     <li class="menu"><a href="#news">About Us</a></li> 
     <ul class="sub_menu"> 
      <li>Our Mission Statement</li> 
      <li>How Funds Are Spent</li> 
      <ul class="sub_sub_menu"> 
       The Founders 
       <li>A</li> 
       <li>B</li> 
       <li>C</li> 
       <li>D</li> 
       <li>E</li> 
       <li>F</li> 
      </ul> 
     </ul> 
     <li class="menu"><a href="#contact">What We Do</a></li> 
     <ul class="sub_menu"> 
      <li>T-Shirt Designs</li> 
      <li>Future Design Ideas</li> 
      <ul class="sub_sub_menu"> 
       Fact Sheets 
       <li>How Our Fact Sheets Work</li> 
       <li>Fact Sheet 1</li> 
      </ul> 
     </ul> 
     <li class="menu"><a href="#about">Media</a></li> 
     <li class="menu"><a href="#contact">Contact Us</a></li> 
    </ul> 
</div> 

CSS如下：

ul { 
    position: absolute; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    padding-top: 0px; 
    padding-bottom: 0px; 
} 
li.menu { 
    display: inline 
} 
a:link, a:visited { 
    font-weight: bold; 
    font-size: 14px; 
    color: #FFFFFF; 
    background-color: #B4B7BD; 
    text-align: center; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    padding-right: 20px; 
    padding-left: 20px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 
a:hover, a:active { 
    background-color: #B4B7BD 
} 
ul.sub_menu li { 
    position: relative; 
    display: none; 
    width: 100%; 
} 
ul.sub_sub_menu { 
    position: relative; 
    display: none; 
} 
ul.sub_sub_menu li { 
    position: relative; 
    display: none; 
    width: 100%; 
    left: 100%; 
} 

Answer 1

HTML問題

首先

<ul class="sub_sub_menu">The Founders 

這是非法的內部的無序文本列表標籤，如果這是爲了列表的標題，那麼標題需要是無序列表嵌套在列表項中的文本/鏈接。

而且，你已經這樣做了好幾次：

​​

在您的代碼需要：

<li class="menu"><a href="#news">About Us</a> 
    <ul class="sub_menu"> 
     <li>Our Mission Statement</li> 
     <li>How Funds Are Spent</li> 
    </ul> 
</li> 

可以看到，無序列表是在第二個例子正確地嵌套，然而在第一個不是，導致你的問題。

這些都是我認爲的HTML問題，現在到了CSS。

CSS問題

您應該只將代碼添加到你的CSS，使這項工作，這裏是如何讓第一個子菜單顯示當你翻轉菜單項的例子。

li.menu:hover ul li { 
     display: block; 
} 

只需重複說明，您可以獲得各子子子菜單。

最後一件事是你對選擇器的使用有點粗略，如果你有「.sub_menu」作爲一個類，那麼你不需要在元素類型前添加它，除非有多種元素類和要選擇一個單一的一個，這是我看不到你與你的網站做的，所以不是：

li.menu 
ul.sub_menu 
ul.sub_sub_menu 

只使用類作爲一個選擇：

.menu 
.sub_menu 
.sub_sub_menu 

這種做法在現代瀏覽器中渲染速度更快，而且在許多方面更清晰。

然後你走了！它現在應該都很好地工作。