html - CSS下拉菜单，父级不可点击

Question

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

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

谢谢

score 3 · Accepted Answer

如果你给子菜单 ul 一个减 z-index 这将解决你的问题。

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

编辑

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

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

#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导致问题的标签上方。

score 0 · Accepted Answer

我认为您的问题与您为 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 和列表的基础知识的有用教程。

2 回答 2