0

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

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的底部有一些东西导致了这个问题，如果有人能向我指出，那就太好了:)

4

4 回答 4

2

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

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-04T18:59:28.457 回答
1

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

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

对此：

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

工作示例（更新）

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

#sideNavArchive > ul { display: none; }
#sideNavArchive > li:hover + ul { display: block; }
于 2013-10-04T18:57:25.333 回答
0

基本问题是你关闭li得太早了

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

是正确的结构。

JSFIdle

于 2013-10-04T19:03:31.413 回答
0

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

小提琴

于 2013-10-04T19:18:01.363 回答