導航欄上的子菜單不工作的CSS

我正在一個網站上工作，並創建了一個帶有子項目的導航欄，但我沒有在懸停時顯示這些子項目。下面是導航欄我的HTML和CSS代碼：導航欄上的子菜單不工作的CSS

<div class="collapse navbar-collapse" id="spi-primary-nav"> 
     <ul class="nav navbar-nav"> 
     <li id="menu-item-9265" class="home-link menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9001 current_page_item menu-item-9265"> 
      <a href="index.html">Home</a> 
     </li> 
     <li id="menu-item-9004" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9004 "> 
      <a href="Default.aspx">Store</a> 
      <ul> 
        <li><a href="#">Sub Menu 1</a></li> 
        <li><a href="#">Sub Menu 2</a></li> 
        <li><a href="#">Sub Menu 3</a></li> 
      </ul> 
     </li>  
    </ul> 
</div>

的CSS是在這裏：

.navbar-nav > li > ul { 
    display: none; 
    position: absolute; 
} 
.navbar-nav > li > ul:hover { 
    display:block; 
}

下面是該網站的情況下，活鏈接有人要檢查使用Firebug的元素： http://webcalendar.pcprosinc.com/Home

請幫我

來源

2014-03-24 Zeeshan

你在T了你的:hover他錯了地方。
它應該是在li代替ul

試試這個：

.navbar-nav > li:hover > ul { 
    display:block; 
}

來源

2014-03-24 21:21:21 kei

我試過，但它不工作..能否請您檢查與螢火蟲這個問題？ – Zeeshan

當我將鼠標懸停在「Store」上時，我確實看到子菜單，儘管樣式不正確 – kei

正如kei所說，當您添加該規則時它正在工作。要在Firebug中對此進行測試，請切換到[* CSS *面板]（https://getfirebug.com/wiki/index.php/CSS_Panel），右鍵單擊它並選擇* New Rule ... *。然後添加選擇器，按下'Tab'，添加'display'作爲屬性名稱，再次按下'Tab'，並輸入'block'作爲值。 –

導航欄上的子菜單不工作的CSS

回答

相關問題