在導航上隱藏子菜單

我正在嘗試創建一個下拉菜單。我讓它工作了一分鐘。
我的代碼如下：在導航上隱藏子菜單

<nav id="nav"> 
<ul> 
    <li class="subNav"><a href="somePage1.php">Some Page1</a> 
    <ul> 
     <li><a href="relatedPage1">Related Page1</a><li> 
     <li><a href="relatedPage2">Related Page2</a><li> 
    </ul> 
    <li> 
</ul> 
</nav>

我的CSS如下：

#nav li.subNav ul{ 
display: none; 
} 

#nav li.subNav:hover ul{ 
display: block; 
}

我有一個涉及到這個網頁放置三個CSS文件。一個基本上是一個字體的網絡工具包，另外兩個是bowlerplate.css和我的自定義文件customFile.css。標籤< #nav li.subNav：hover ul>顯示在customFile.css和< #nav li.subNav ul>在檢查計算樣式時在自定義和樣板文件中顯示。

有兩件事我想解決;子菜單水平排列（我需要它垂直）並且子菜單不隱藏。我不得不在ul周圍嵌套/ li標籤，以便照顧一個問題（它們現在在父標簽下對齊）。

我還注意到我父母李的高度和寬度都發生了變化。我瞭解它擴大到容納列表項目，但增加的高度似乎有點奇怪。

來源

2014-10-09 JZeig1

好了，看到沒有人願意幫助我以前的帖子，這裏有幾個問題。我已經使用可見性隱藏了ul：隱藏在li.subNav ul選擇器上，但背景仍然顯示。有關如何將背景返回到mainNav大小的任何建議。 – JZeig1 2014-10-18 13:16:10

這裏是我的解決上述問題

#nav li.subNav:hover ul li { 
     visibility: visible; 
     width: 171px; 
     padding: 0; 
     cursor: pointer; 
     float: none !important; 
     display: block !important; 
    }

來源

2014-10-24 12:39:04 JZeig1

在導航上隱藏子菜單

回答

相關問題