基于 :link 的悬停隐藏/显示的 CSS 选择器

Question

我在弄清楚应该与我的 CSS 一起使用哪个选择器或选择器层次结构来显示“子菜单”时遇到了一些麻烦。

我想根据 a:link 的悬停显示子菜单在一个完全独立的 <nav> 内在 <ul> 内.

我只是不确定如何编写 CSS 以获得该效果

HTML

<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>

错误的 CSS

.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;
}​

我的 fiddle - http://jsfiddle.net/NVwks/

期望的效果是子菜单 block 基于悬停在任何链接上而出现，尽管最终我会给出 a:links独特子菜单的独特类。

非常感谢。

Answer 1

这里的问题是您的 a:link 元素包含在您的 nav 元素中，正如您所说，它与您想要的子菜单元素完全分开展示。结构中的这种分离使得单独使用 :hover 和其他 CSS 选择器无法实现。

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