與HTML/CSS菜單的小錯誤

我想搭起一個網站，但我遇到了動態菜單的一些問題。更具體地說，我調整了一個模板以包含下拉菜單：一些菜單項包括光標結束時出現的子列表;此外，當用戶在特定頁面上時，主項目應該將鼠標移到背景上。與HTML/CSS菜單的小錯誤

我想得到的是，只要您訪問子頁面，只有主菜單項突出顯示，但不幸的是，這不會發生。選擇時我無法將主要項目切換到背景，我不知道爲什麼。

這裏涉及到的CSS： /*菜單*/

#menu { 
    background: #65b63a; 
    clear: both; 
    height: 30px; 
    border: 1px solid #65b63a; 
    padding:0; 
    margin:0; 
} 

#menu ul li.active a, #menu ul li:hover { 
    background:url('images/menuover.jpg') repeat-x bottom; 
} 

#menu ul { 
    list-style: none; 
    float:left; 
    margin:0; 
    padding:0; 
    font-size:10pt; 
}  

#menu ul li { 
    background: #65b63a; 
    position:relative; 
    display: block; 
    float: left; 
    margin-right: 1px; 
    font-size: 10pt; 
    text-transform:uppercase; 
    line-height: 30px; 
    padding:0; 
    margin:0; 
    border-right:1px #aeaeae solid; 
} 

#menu ul li a { 
    display: block; 
    float: left; 
    padding: 0 17px; 
    color: #FFFFFF; 
    text-decoration: none; 
} 


#menu ul li.sub a{ 
    background-image:none; 
} 

#menu ul li ul{ 
    display:none; 
} 

#menu ul li ul li{ 
    padding:0; 
    margin:0; 
} 


#menu ul li:hover ul{ 
    background:none; 
    display:block; 
    position:absolute; 
    width:200px; 
    padding-top:30px; 
    margin:0; 
    font-size:10pt; 
} 

#menu ul li ul a:hover { 
    text-decoration:underline; 
    background:none; 
} 

#menu ul li li{ 
    width:200px; 
    font-size:10pt; 
    background-image:none; 
    text-transform:none; 

}

而這裏所涉及的HTML：

 <div id="menu"> 
      <ul> 
       <li><a href="index.html">Home</a></li> <!-- this one is a single item --> 
       <li class="active"><a href="#">Chi? Dove? Quando?</a> <!-- this should be "active" but it isn't --> 
        <ul> 
         <li class="sub"><a href="chi.html">Chi siamo</a></li> 
         <li class="sub"><a href="dove.html">Dove siamo</a></li> 
         <li class="sub"><a href="orari.html">Orari</a></li> 
         <li class="sub"><a href="staff.html">Lo staff</a></li> 
         <li class="sub"><a href="contatti.html">Contatti</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div>

我相信這個問題是在CSS，但我不能讓這行得通。

由於提前，洛倫佐

附：作爲參考，你可以找到一個原始的網站@http://www.pansepol.it/raw 該主頁是和單一頁面的例子，而「Viaggi di Gruppo」>「亞洲」是一個多層次的例子。正如你所看到的，當瀏覽到這最後一頁時，「Viaggi di Gruppo」沒有被突出顯示。

編輯：-------------------------------------------- ---------------

傻了，就這麼簡單。我將「活動」類應用於<li>元素，並將CSS更正爲Justus和Raad的建議。

現在的代碼讀取：

#menu ul li.active a, #menu ul li:hover { 
    background:url('images/menuover.jpg') repeat-x bottom; 
}

和

<li class="active"><a href="#">Chi? Dove? Quando?</a> 
       <ul> 
        <li class="sub"><a href="chi.html">Chi siamo</a></li> 
        <li class="sub"><a href="dove.html">Dove siamo</a></li> 
        <li class="sub"><a href="orari.html">Orari</a></li> 
        <li class="sub"><a href="staff.html">Lo staff</a></li> 
        <li class="sub"><a href="contatti.html">Contatti</a></li> 
       </ul> 
      </li>

一切工作順利進行。

謝謝

洛倫佐

來源

2013-02-18 LorDisturbia

我試着用你的代碼，我得到這個http://jsfiddle.net/rVabR/是你期待的結果嗎？ – TNK 2013-02-18 14:43:22

我相信你在你的CSS做了一個小的失誤：

#menu ul li.active a, #menu ul li:hover {

應該是：

#menu ul li.active, #menu ul li:hover {

因爲你想要的li到顯示背景圖片，而不是你的a。

來源

2013-02-18 14:20:52

感謝您的快速回復。我試着按照你的建議糾正了代碼，但那並沒有改變任何東西... 還有其他線索嗎？ – LorDisturbia 2013-02-18 14:26:34

在網站上，'active'類被添加到'a'元素中。確保你將類名添加到'li'（如你的問題代碼中） – 2013-02-18 14:30:08

它工作，謝謝！ :) – LorDisturbia 2013-02-18 15:27:22

在「主頁」頁面上，「活動」類正在應用於<li>元素;但在「Viaggi di Gruppo」>「亞洲」上，它應用於<a>元素。它需要是一個或另一個，然後在必要時在CSS中進行調整。

來源

2013-02-18 14:27:12 Raad

與HTML/CSS菜單的小錯誤

回答

相關問題