Question

我尝试制作一个水平下拉菜单，其中每个子菜单都会出现在同一位置（不在每个子菜单父级下）。我想在没有javascript的情况下制作这个，这就是我现在所做的事情（它只是简单的css下拉菜单）：

我必须发布一些带链接的代码，所以我选择了这个块给你看：

.main_menu ul {
  background-color: #efffc7;
  display: none;
  z-index: 100;
  width: 980px;
  height: 324px;
  left:0;
  position: absolute;
}

这是子菜单的css，但是当我用绝对位置或相对位置定位它时，它只会位于他的父DIV中。我尝试使用固定位置，但这并不漂亮。

对不起，如果这个问题已经得到解答，但我在找到关于这个主题的任何内容时遇到了困难。我希望只使用CSS即可完成。

由于

编辑：

我感谢所涉及的菜单可以在FIDDLE

中找到

Answer 1

非常有趣的情况。我喜欢灵活地移动弹出窗口的想法，而CBroe的出色评论让我想出了这个FIDDLE。

CSS - 只需转到＆＃34;持有人＆＃34; ul并使其位置相对。

#nav {
    position: relative;
}

CSS - 然后定位＆＃34; hovered＆＃34;元素绝对：

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display: block;
    position: absolute;
    top: 50px;
    left: 150px;
}

非常感谢CBroe！

CSS下拉菜单，子菜单绝对/相对位置到其他元素

1 个答案: