是否可以在绝对 div 中放置相对下拉框？

Question

我遇到了一些困难，我希望有人能指出我正确的方向。我是 CSS 新手，所以希望这是一个非常简单的情况。

我想要什么：

我想在我的页眉中种植（Nest？）多个下拉框，这些下拉框沿该页眉水平延伸。

我尝试了什么：

我尝试创建一个相对下拉框并将其放在相对容器中的绝对标题中。

Wrapper/Container（相对）--> Header Div（绝对）--> 下拉按钮（相对）--> 下拉内容（绝对）

我得到了什么：

相对下拉按钮将显示在绝对标题下方而不是其中。下拉框将起作用，但它不会将自己定位在我想要的位置。我不确定如何才能得到我想要的。

div#container {
  /*Features*/
  /*Position*/
  position: relative;
  top: 5%;
  left: 15%;
  /*Dimensions*/
  height: 90%;
  width: 70%;
  /*Font and colours*/
  background: gray;
}

div#header {
  /*Features*/
  position: absolute;
  border-style: solid;
  /*Dimensions*/
  height: 10%;
  top: 0%;
  left: 0;
  right: 0;
  /*Font and colours*/
  background: #e67300;
  font-size: 30px;
  text-align: center;
  clear: both;
}

.dropdown {
  /*Position*/
  top: 10%;
  left: 15%;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  /*Position*/
  position: absolute;
  z-index: 1;
  display: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div id="container">
  <div id="header">
    <p>Title</p>
    <div class="dropdown" style="font-size:10px">
      Mouse over me please
      <div class="dropdown-content">
        <a href="index.html">Home</a>
      </div>
    </div>
  </div>
</div>

Answer 1

只需从 div#header 中删除 height 属性。希望对您有所帮助

div#container {
  /*Features*/
  /*Position*/
  position: relative;
  top: 5%;
  left: 15%;
  /*Dimensions*/
  height: 90%;
  width: 70%;
  /*Font and colours*/
  background: gray;
}

div#header {
  /*Features*/
  position: absolute;
  border-style: solid;
  /*Dimensions*/
  top: 0%;
  left: 0;
  right: 0;
  /*Font and colours*/
  background: #e67300;
  font-size: 30px;
  text-align: center;
  clear: both;
}

.dropdown {
  /*Position*/
  top: 10%;
  left: 15%;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  /*Position*/
  position: absolute;
  z-index: 1;
  display: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div id="container">
  <div id="header">
    <p>Title</p>
    <div class="dropdown" style="font-size:10px">
      Mouse over me please
      <div class="dropdown-content">
        <a href="index.html">Home</a>
      </div>
    </div>
  </div>
</div>

Answer 2

将此添加到您的 css 文件中：

p{
    display:inline-block;
}

<p>Title</p>你要知道<p>是一个占一整行的块元素。

这是您修改后的 CSS：

div#container
{
    /*Features*/
    /*Position*/
    position:relative;
    top:5%;
    left:15%;
    /*Dimensions*/
    height:90%;
    width:70%;
    /*Font and colours*/
    background:gray;
}

div#header
{
    /*Features*/
    position:absolute;
    border-style:solid;
    /*Dimensions*/
    height:10%;
    top:0%;
    left:0;
    right:0;
    /*Font and colours*/
    background:#e67300;
    text-align:center;
    clear:both;
}
p{
    display:inline-block;
}

.dropdown
    {
        /*Position*/
        top:10%;
        left:15%;
        position:relative;
        display: inline-block;

    }

    .dropdown-content
    {
        /*Position*/
        position:absolute;
        z-index:1;
        display:none;
    }

    .dropdown:hover .dropdown-content
    {
        display:block;
    }