Question

所以我一直试图让这个下拉菜单在过去几个小时内正常工作，我没有运气。

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的底部问题引起了这个问题，如果有人可以向我指出它会很棒：）

Answer 1

除了错字之外，我认为你正在寻找这样的东西：

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

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

Answer 2

你的标记中有拼写错误。您不需要#符号。改变这个：

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

到此：

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

Working example (UPDATED)

此外，您可以降低定位的特异性，只需定位直接后代ul（子菜单），而不是指定其中包含的每个li：

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

Answer 3

基本问题是您过早关闭li

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

是正确的结构。

JSFIddle

Answer 4

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; {{1}}，这意味着在屏幕外，通过将其悬停在屏幕上。

Fiddle

嵌套的CSS下拉菜单

4 个答案: