CSS下拉菜单，父无法点击

Question

我创建了一个CSS fly out menu。 似乎在悬停时飞出子菜单，这就是我需要的。 我唯一的问题是当li a有一个子菜单时，你无法点击顶级菜单项。我可以在Firebug中看到它覆盖在顶部。

我有什么建议可以解决这个问题吗？

由于

Answer 1

如果你给子菜单减去z-index，这将解决你的问题。

#nav ul ul {
    display: none;
    z-index: -1;
    }

以下是更新的jsfiddle http://jsfiddle.net/JsVr4/3/

修改

查看网站后，我对我的回答进行了更改。

首先更改#nav ul ul li中的以下内容

#nav ul ul li {
    top: 42px;
    }

到

#nav ul ul li {
    top: 0px;
    }

然后将以下内容添加到#nav ul ul

#nav ul ul {
    display: none;
    position: relative;
    margin-top: 32px;
    padding-top: 10px;
    }

这将解决问题。 #nav ul ul位于引起问题的标记上方。

Answer 2

我认为您的问题与您为li标签提供“顶级”属性的方式有关。只需删除该属性，而不是将其放入嵌套的无序列表标记中将有很大帮助（如下所示），否则您的子菜单会与菜单重叠。

#nav ul ul {
  left: 0;
  list-style: none outside none;
  padding:0;
  position: absolute;
  top: 38px; /* this is what I added */
}

我在jsfiddle中创建了自己的版本。看看这里：http://jsfiddle.net/akiryk/EJ8u2/2/

另外，我建议花点时间阅读一些有关使用css和列表的基础知识的有用教程。

来自alistapart的一个好旧的：http://www.alistapart.com/articles/horizdropdowns/