Html Dropdownlist永远不会显示在父项下

我试图在一个酒吧里制作一个下拉列表，但不管我做了什么，下拉列表永远不会出现在父列表的下方。以下是我的css代码：

ul{
列表样式：无；
填充：0；
左边距：自动；
宽度：100%；
溢出：隐藏；
背景色：#F9282F；}
李阿{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
浮动：左；
字体大小：15px；
字体大小：粗体；}
李娜：停下来{
背景色：#111；}
.下拉列表{
位置：相对位置；
显示：内联块；}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#800000；
最小宽度：160px；}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左；}
.下拉：悬停.下拉内容{
显示：block；}
.dropdown:悬停.dropbtn{
背景色：#111；}

您可以添加

顶部：100%至
。下拉列表内容
从
li a
中删除
float:left
。您正在尝试浮动锚点。
家长不应使用浮动：左
所以这个
style=“float:none；”“
将解决这个问题

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

BlaBla
在下拉列表中使用浮动通常是个坏主意。您可以通过将显示内联块、UL和LI元素仅作为结构（例如定义宽度）使用，并将其内部的元素以类似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:







别的

编辑：我对代码进行了一些更新，这样您就不会对下面的任何元素产生问题。如果重叠顺序有问题，可以使用z-index。
将颜色空白添加到类（.li a）中，并将页边距top:50px添加到类（.dropdown content）中并开始工作


ul{
列表样式：无；
填充：0；
左边距：自动；
宽度：100%；
溢出：隐藏；
背景色：#F9282F；}
李阿{
显示：内联块；
颜色：#000；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
浮动：左；
字体大小：15px；
字体大小：粗体；}
李娜：停下来{
背景色：#111；}
.下拉列表{
位置：相对位置；
显示：内联块；}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#800000；
最小宽度：160px；
页边距顶部：50px；}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左；}
.下拉：悬停.下拉内容{
显示：block；}
.dropdown:悬停.dropbtn{
背景色：#111；}

再次查看您接受的标签，如果您将
标签放回，它将停止工作。而且，您永远无法使用该方法选择下拉菜单。
<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>