html - CSS悬停下拉菜单，绝对位置？

Question

描述这个问题的最好方法是用图片(不要介意荷兰语)，我现在坚持这个: Example1

在第一个示例中，您可以看到红色下拉悬停线与父级在这种情况下。我想要的是这样的: Example2

我在示例 2 中的做法是使用元素检查并使用 margin-top (40px) 手动更改 Ul。这意味着我必须在接下来的几个菜单链接上设置 80px、120px 等。

有没有更简单的方法？

提前致谢!

Answer 1

相对于菜单容器 ( <ul> ) 而不是相对于菜单项 ( <li> ) 放置下拉菜单。

jsFiddle 上的一个简单示例.

相关 HTML:

<ul class="outer">
  <li>
    Beelden

    <ul class="sub-menu">
      <li>Geurkaarsen</li>
      <li>Rituele kaarsen</li>
      <li>Affirmatie kaarsen</li>
    </ul>
  </li>
</ul>

和CSS:

/* Your outer menu */
ul.outer {
  position: relative;
}

li {
  /* Whatever styles you set here, don't give it relative positioning */
}

ul.sub-menu {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
}

现场演示:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
}

body > ul {
  /* This next line is crucial */
  position: relative;
  background-color: #c5e2d8;
  width: 30%;
  height: 100%;
}

ul.sub-menu {
  display: none;
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  background-color: tomato;
}

li {
  display: block;
  color: #444;
  padding: .5em;
  cursor: pointer;
}

  li.has-children::after {
    content: '▸';
    position: absolute;
    right: 5px;
  }
  
  li:hover {
    background-color: tomato;
  }
  
  li.has-children:hover ul {
    display: block;
  }

<ul>
  <li class="has-children">
    Beelden
    
    <ul class="sub-menu">
      <li>Geurkaarsen</li>
      <li>Rituele kaarsen</li>
      <li>Affirmatie kaarsen</li>
    </ul>
  </li>
  <li class="has-children">
    Kaarsen
    
    <ul class="sub-menu">
      <li>Sub-menu 2</li>
      <li>I don't know</li>
      <li>any Dutch</li>
    </ul>
  </li>
  <li>Wierook</li>
  <li>Kruiden</li>
  <li>Olien</li>
</ul>