如何仅将一个 div 放置在其父级下方，而将其他 div 保持在同一位置？

Question

所以，我正在创建一个导航栏，我希望 "Calculators" link 在您将鼠标悬停在它上面时也有一个下拉菜单。如您所见，当您将鼠标悬停在计算器 link 上时，它看起来非常奇怪。出于某种原因，link 下拉菜单的“第一个、第二个和第三个选项”并排出现在顶部，因此它们改变了 "Home" 按钮的位置。我怎样才能让 link 出现在其父级 div 的下方，并将其他所有内容保持在同一行？

这是代码。将鼠标悬停在 "Calculators" 按钮上以了解我的意思。这三个 link 如何进入 "Calculators" 按钮下方的下拉菜单。

<body>
<div class = "menu"><div id = "icon">The Orange Calculator</div>
      <a id = "contact">Contact</a>
      <a id = "help">Help</a>
      <div style = "display: inline" class = "dropdown">
          <a class = "calc">Calculators</a>
            <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
      </div>
      <a id = "home">Home</a></div>
</body>
<style>
body {
  margin: 0;
}
.dropdown:hover .dropdown-content {
  display: inline;
}
.dropdown-content {
  display:none;
}
.menu {
    border-bottom: 2px solid #FF7800;
    //border-image: linear-gradient(to right, white, #FF7800, white);
    //border-image-slice: 1;
    width: 100%;
    font-size: 17px; 
    font-family: Arial;
    line-height: 100px;
}
a {
    float: right;
    width: 12%;
    height: 100;
    text-align: center;
    color: #5F5F5F;
    transition: color 0.4s;
}
a:hover {
    color: #FF7800;
    cursor: pointer;
}
#home {
    background-color: #FF7800;
    color: #FFF;
    display: inline-block;
}
#icon {
    display: inline;
    margin-left: 10;
    font-size: 35
}
</style>

Answer 1

您可以使用 position:absolute; 相对于其父项 div dropdown 轻松对齐您的下拉菜单 div 并且因为您使用浮动来调整您的元素我也有尝试使用浮动来实现此目的，但您可以使用 css flexbox 来实现，这是一种更好的方法。请尝试以下 css

body {
  margin: 0;
}
.dropdown {
  position: relative;
  width: 12%;
  float: right;
  text-align: center;
}
.dropdown:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
}
.dropdown-content {
  visibility: Hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  height: auto;
  padding: 10px;
  display: block;
  border: 1px solid #ccc;
  padding: 15px;
}
.dropdown a {
  float: none;
}
.dropdown-content a {
  width: 100%;
  display:block;
  margin: 4px 0;
}
.menu {
  border-bottom: 2px solid #ff7800;
  //border-image: linear-gradient(to right, white, #FF7800, white);
  //border-image-slice: 1;
  width: 100%;
  font-size: 17px;
  font-family: Arial;
  line-height: 100px;
}
a {
  float: right;
  width: 12%;
  height: 100;
  text-align: center;
  color: #5f5f5f;
  transition: color 0.4s;
}
a:hover {
  color: #ff7800;
  cursor: pointer;
}
#home {
  background-color: #ff7800;
  color: #fff;
  display: inline-block;
}
#icon {
  display: inline;
  margin-left: 10;
  font-size: 35;
}

<body>
  <div class="menu">
    <div id="icon">The Orange Calculator</div>
    <a id="contact">Contact</a>
    <a id="help">Help</a>
    <div style="display: inline" class="dropdown">
      <a class="calc">Calculators</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <a id="home">Home</a>
  </div>
</body>

希望这能解决您的问题。

Answer 2

我建议你使用 flexbox 而不是 float

<body>
  <div class="menu">
    <div class="header">
      <p>The Orange Calculator</p>
    </div>
    <div class="navbar">
      <div class="link-navigation home">
        <a href="#" alt="home">Home</a>
      </div>
      <div class="dropdown">
        <p class="calc link-navigation">Calculators</p>
        <div class="dropdown-content">
          <a href="#" alt="link-1">Link 1</a>
          <a href="#" alt="link-2">Link 2</a>
          <a href="#" alt="link-3">Link 3</a>
        </div>
      </div>
      <div class="link-navigation">
        <a href="#" alt="help">Help</a>
      </div>
      <div class="link-navigation">
        <a href="#" alt="contact">Contact</a>
      </div>
    </div>
  </div>
</body>
<style>
body {
  margin: 0;
}
.menu {
  border-bottom: 2px solid #FF7800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.header, .header > p, .navbar, .dropdown, .link-navigation, .dropdown-content {
  display: inline-block;
}
.link-navigation {
  cursor: pointer;
  font-size: 17px;
  padding: 50px 20px;
}
.link-navigation.home {
  background-color: #FF7800;
  color: #FFF;
}
.link-navigation > a, .dropdown-content > a {
  color: #5F5F5F;
  text-decoration: none;
}
.header {
  margin: auto 0;
}
.header > p {
  font-size: 17px;
  margin: 0;
}
.dropdown-content > a {
  display: block;
  padding: 20px;
}
a:hover, .calc:hover {
  color: #FF7800;
  transition: color 0.4s;
}
.home > a {
  color: #fff;
}
.dropdown > .calc.link-navigation {
  margin: 0;
}
.dropdown-content {
  display: none;
}
.dropdown:hover .dropdown-content {
  display: block;
  position: absolute;
  z-index: 99;
  padding: 0 20px;
}
</style>

您可以在 CSS-Tricks

中阅读有关 CSS Flexbox 的更多信息

如何仅将一个 div 放置在其父级下方，而将其他 div 保持在同一位置？

How do I position just one div below its parent, but keep the other divs in the same spot?

html

javascript

css

css-position

drop-down-menu