下拉列表从未显示在父母之下

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

您可以将top: 100%;添加到.dropdown-content

Answer 2

从float:left移除li a。你试图漂浮锚。

Answer 3

父母不应该浮动：左 所以这个style="float: none;"将解决问题

<a class="dropbtn" style="float: none;">BlaBla</a>

Answer 4

有几件事需要解决：

1. 删除ul { overflow: hidden; }
2. 删除li a { float: left; }

应该全部设定。我还更新链接颜色，使其看起来更好。

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;
}

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

Answer 5

在下拉列表的情况下使用浮动通常是个坏主意。您可以通过使用display-inline块，UL和LI元素仅作为结构（f.e.define width）和内部元素来实现大部分工作，以便像A一样呈现它们。

ul{
    list-style:none;
    padding:0;
    margin-left:auto;
    width:100%;
}


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

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

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

.dropdown-content {
    display: none;
    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;
}

ul.root {
    height: 50px;
}

ul.root li {
    position: relative;
}

ul.root ul {
    position: absolute;
}

HTML：

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

编辑：我稍微更新了代码，因此您不会对下面的任何元素产生任何问题。如果您遇到重叠订单的问题，可以使用z-index。

Answer 6

为您的班级（.li a）添加颜色空白，并为您的班级（.dropdown-content）添加margin-top：50px并开始工作。

＆＃13;

＆＃13;

 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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;