0

我在确定应该与我的 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;
}​

我的小提琴 - http://jsfiddle.net/NVwks/

期望的效果是子菜单块基于悬停在任何链接上出现，尽管最终我将为a:links独特的子菜单提供独特的类。

非常感谢。

4

1 回答 1

2

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

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

于 2012-10-18T15:36:07.473 回答