基于：链接悬停的隐藏/显示CSS选择器

我在弄清楚我应该在CSS中使用哪个选择器或选择器层次结构来获得要显示的“子菜单”时遇到了一些问题

我希望在

中完全独立的

中，根据

a:link

的悬停显示子菜单

我只是不知道如何编写CSS以获得这种效果

HTML

我的小提琴-

理想的效果是子菜单块基于悬停在任何链接上而显示，尽管最终我将为唯一子菜单提供

a:links

唯一类

---

非常感谢。

这里的问题是您的

a:link

元素包含在

nav

元素中，正如您所说，它与要显示的子菜单元素完全分离。结构中的这种分离使得仅使用

：hover

和其他CSS选择器无法实现

---

重新构造标记的空间似乎不大，因此您可能需要使用脚本来实现所需的功能。

单用CSS似乎不可能做到这一点。

.subemunav

元素不是链接的子元素或同级元素，您不能使用CSS选择器“返回”。在

中，您可以使用

li>a:hover.subemunav{display:block；}

在CSS中执行此操作。但在你的例子中，我认为你做不到。这很公平。我本来希望情况不是这样，但现在我想我会求助于JQuery来实现这一点。谢谢你的支持！

<div class="row">
    <nav id="nav" class="nav-holder">
        <ul id="nav" class="menu">
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
        </ul>
    </nav>
    </div>
    <div class="cleared"></div>

    <div class="row">
        <div class="submenunav"></div>
    </div>

.submenunav { display:none;}

#nav ul#nav li a:hover .submenunav {
   position:absolute;
   z-index:500;
   display:block;
   margin:0px;
   padding:0px;
   width:940px;
   height:200px;
   background:#E9EAEE;
   border-bottom:9px #67B7E1 solid;
   box-shadow:0 8px 6px -6px black;
}​