Html 子菜单校准问题

我使用的是位于这里的。我需要让它看起来像下图

将鼠标悬停在下拉菜单上，使其与

按钮的左侧齐平

如何使其与右侧齐平，而不是与左侧齐平

*.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

下拉列表

向下拉列表div添加

dir=“rtl”

属性将解决您的问题

<div class="dropdown" dir="rtl">

检查这是否是您想要得到的结果？

向下拉列表div添加

dir=“rtl”

属性将解决您的问题

<div class="dropdown" dir="rtl">

---

检查这是否是您想要得到的结果？

您只需要将

右：0

添加到

下拉列表内容中，因为默认情况下
位置：绝对
是向左对齐的（如
左：0
）


.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
/*演示*/
左：300px
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
右：0
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

下拉列表
您只需将
右：0
添加到
下拉内容中
，因为默认情况下
位置：绝对
是向左对齐的（如
左：0
）


.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
/*演示*/
左：300px
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
右：0
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

下拉列表
Marc B我已经尝试将浮动添加到右侧。。没有结果的图片，我希望它看起来如何马克B我已经尝试添加浮动权利。。没有我想要的结果图片。另外，我建议你不要在CSS中使用*。这是非常昂贵的资源和不必要的工作添加到浏览器。至少在你的CSS中，你肯定应该排除它。此外，我建议你不要在CSS中使用*。这是非常昂贵的资源和不必要的工作添加到浏览器。至少在你的CSS中，你肯定应该排除它。