导航栏下拉菜单在香草 CSS 周围跳转

Question

www.jestforbeginners.com

在该网站的主页上，我为故障排除选项卡创建了一个下拉菜单。然而，当我将鼠标悬停在菜单上时，它会不断跳跃。我添加了一些 CSS 属性来改进它，但我觉得一定有更简单的方法。

这个网站完全由普通 HTML 和 CSS 组成。

我遵循了 hubspot 和 w3schools 的教程（https://blog.hubspot.com/website/html-dropdown 和 https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp）。但我无法确定为什么我的示例不像他们的示例那样工作。

我只是一个初学者，我的兴趣实际上是自动化测试，但我似乎无法超越这一点。任何提示将不胜感激！

如果可以让事情变得更容易，我可以用我的代码更新这篇文章。

Answer 1

将

postion:relative

给予必须锚定的父级，然后将

position:absolute

给予子级——这是列表项。

.container {background: yellow; padding:10px;}
.navbar {position:relative;}
.navbar ul {position:absolute; display:flex; justify-content:space-around;}
.navbar ul > li {list-style:none; margin:10px;}
ol {display:none;}
ol li {list-style:none; margin-left:-40px; background:#663333; border-radius:4px; box-shadow:4px 4px 4px #999; color:#fff; padding:8px; }
.navbar ul li:hover ol {display:block;}

<div class="container">
<div class="navbar">
<ul>
  <li>Home</li>
  <li>About</li>
  <li>TroubleShooting
    <ol>
      <li>Error: Missing ) after argument list</li>
    </ol>
  </li>
</ul>
</div>
</div>