嵌套CSS下拉菜單

所以我一直試圖讓這個下拉菜單正常工作過去幾個小時，我沒有運氣。嵌套CSS下拉菜單

的HTML是：

<nav> 
<ul id="#sideNavArchive"> 
    <li><a>Year</a></li> 
    <ul> 
    <li><a>Month</a></li> 
    <li><a>Month</a></li> 
    </ul> 
    <li><a>Year</a></li> 
    <ul> 
    <li><a>Month</a></li> 
    <li><a>Month</a></li> 
    </ul> 
    </ul> 
</nav>

現在，所有我希望做的是新年的懸停和換了個地掉了下來，但我似乎運行與CSS選擇器的麻煩。

的CSS我目前所面對的：

ul#sideNavArchive > li{background-color:red; display:block;} 
ul#sideNavArchive > ul > li{display:none;} 
ul#sideNavArchive > li:hover ul > li{display:block;}

有明顯的東西與底部件的CSS這是造成問題，如果有人能指出來，我認爲會是很大的:)

來源

2013-10-04 UzumakiDev

除了錯字，我認爲你正在尋找的東西是這樣的：

http://jsfiddle.net/jbaum012/dekYZ/

#sideNavArchive > li{background-color:red; display:block;} 
#sideNavArchive > ul > li{display:none;} 
#sideNavArchive > li:hover + ul > li{display:block;}

來源

2013-10-04 18:59:28 jbaum012

是的，很好的電話。 – kunalbhat

對錯別字抱歉，不理會他們，但是，這正是我一直在尋找的！謝謝。 – UzumakiDev

您在標記中有錯字。您不需要#符號。更改此：

<ul id="#sideNavArchive">..</ul>

這樣：

<ul id="sideNavArchive">..</ul>

Working example (UPDATED)

此外，還可以減少您的定位的特殊性，只是針對直系後裔ul（子菜單），而比指定其中包含的每個li：

#sideNavArchive > ul { display: none; } 
#sideNavArchive > li:hover + ul { display: block; }

來源

2013-10-04 18:57:25 kunalbhat

阿的錯別字是的，對不起，我一直在尋找的答案是「+」和選擇是的，你說得對，我可以只使用了UL，而不是下到裏，我只是用在這種情況下，css更具體的我正在嘗試做什麼。 – UzumakiDev

最根本的問題是，你被關閉li太早

<li><a>Year</a> 
    <ul> 
    <li><a>Month</a></li> 
    <li><a>Month</a></li> 
    </ul> 
</li>

是適當的結構。

JSFIddle

來源

2013-10-04 19:03:31

HTML：

<ul id="nav"> 
    <li><a>Year<a> 
     <ul> 
      <a>Month</a> 
      <a>Month</a> 
     </ul> 
    </li> 
    <li><a>Year<a> 
     <ul> 
      <a>Month</a> 
      <a>Month</a> 
     </ul> 
    </li> 
    </ul>

CSS：

#nav{ 
    list-style:none; 
    position:relative; 
} 
#nav li{ 
    float:left; 
    margin-right:10px; 
    position:relative; 
} 
#nav a{ 
    display:block; 
    padding:5px; 
} 
#nav ul{ 
    position:absolute; 
    left:-9999px; 
} 
#nav ul li{ 
    padding-top:1px; 
    float:none; 
} 
#nav li:hover ul{ 
    top: 10px; 
    left:-40px; 
}

它在#nav ul其中left是-9999px;這意味着在屏幕的基本完成，通過懸停它得到的屏幕。

Fiddle

來源

2013-10-04 19:18:01 PMint

嵌套CSS下拉菜單

回答

相關問題