html - 下拉列表从不显示在 parent 之下

Question

我正在尝试在栏中制作一个下拉列表，但无论我做什么，下拉列表都不会出现在父级下方。这是我的 CSS 代码:

 ul{
	  list-style:none;
	  padding:0;
	  margin-left:auto;
	  width:100%;
	  overflow: hidden;
      background-color: #F9282F;}


    li a{
	  display:inline-block;
	  color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
	  float:left;
	  font-size:15px;
	  font-weight:bold;}

    li a:hover{
      background-color: #111;}

    .dropdown {
	  position:relative;
      display: inline-block;}

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #800000;
      min-width: 160px;}

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;}

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

    .dropdown:hover .dropbtn {
      background-color: #111;}

    <li class="dropdown" ><a class="dropbtn">BlaBla</a>
					<div class="dropdown-content">
						<a href="">link 1</a>
						<a href="">link 2</a>
					</div></li>

希望有人能帮我解决这个问题。谢谢!

Answer 1

将颜色空白添加到您的类 (.li a) 并将 margin-top:50px 添加到您的类 (.dropdown-content) 并开始工作。

 ul{
	  list-style:none;
	  padding:0;
	  margin-left:auto;
	  width:100%;
	  overflow: hidden;
      background-color: #F9282F;}


    li a{
	  display:inline-block;
	  color: #000;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
	  float:left;
	  font-size:15px;
	  font-weight:bold;}

    li a:hover{
      background-color: #111;}

    .dropdown {
	  position:relative;
      display: inline-block;}

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #800000;
      min-width: 160px;
      margin-top:50px;}

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;}

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

    .dropdown:hover .dropbtn {
      background-color: #111;}

    <li class="dropdown" ><a class="dropbtn">BlaBla</a>
					<div class="dropdown-content">
						<a href="">link 1</a>
						<a href="">link 2</a>
					</div></li>