Html 如何强制菜单在可搜索下拉菜单中向上打开？

我在下面有一个html代码

下拉菜单--> 关于 基础 博客 接触 习俗 支持 工具 它基本上取自这个网站

这就是它的样子

它对菜单中显示的项目进行搜索。现在我想让这个菜单向上而不是向下打开

在网上查看时，我发现我必须提供

bottom:100%。现在在我的例子中，没有
或
标记。这就是我所做的

.dropdown {
  position: relative;
  display: inline-block;
  bottom: 100%; //added this
}

但它什么也没用。如何强制菜单向上显示？
您可以使用以下方法执行此操作：

使用w3cschool的现有代码：


/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
var下拉列表，按钮；
dropdown=document.getElementById（“myDropdown”）；
button=document.getElementById（“myButton”）；
下拉列表.classList.toggle（“显示”）；
dropdown.style.bottom=button.offsetHeight+“px”；
}
函数filterFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
div=document.getElementById（“myDropdown”）；
a=div.getElementsByTagName（“a”）；
对于（i=0；i-1）{
a[i].style.display=“”；
}否则{
a[i].style.display=“无”；
}
}
}
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，
.dropbtn:焦点{
背景色：#3e8e41；
}
#我的输入{
框大小：边框框；
背景图片：url（'searchicon.png'）；
背景位置：14px 12px；
背景重复：无重复；
字体大小：16px；
填充：14px 20px 12px 45px；
边界：无；
边框底部：1px实心#ddd；
}
#我的输入：焦点{
外形：3px实心#ddd；
}
.下拉列表{
位置：相对位置；
显示：内联块；
填充顶部：250px；/*仅用于演示目的*/
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f6f6f6；
最小宽度：230px；
溢出：自动；
边框：1px实心#ddd；
z指数：1；
弯曲方向：柱反向；/*在反向柱中显示子项（从下到上）*/
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉菜单a:悬停{
背景色：#ddd；
}
.表演{
显示器：flex；
}
搜索/筛选下拉列表
单击按钮打开下拉菜单，并使用输入字段搜索特定的下拉链接

下拉列表
@SouvikRay很乐意帮忙！我只是稍微编辑了一下代码，去掉了硬编码的按钮高度，而是用JavaScript计算，使其更加灵活。嘿，伙计！再次需要你的帮助。你提到的修复效果很好，但不知为什么scroll不起作用。我已将此属性添加到我的
。下拉列表内容
溢出-y:auto高度：200px
这在常规下拉菜单中起作用，但在更改为向上显示菜单后，它已停止工作。知道为什么吗？
最大高度：200px起到了作用。无论如何，这是一个单独的问题。尝试使用flexbox查找有关溢出的答案，或将其作为单独的问题发布；）
.dropdown-content.show {
    display: flex;
    flex-direction: column-reverse;
    bottom: 45px; /* hardcoded height of the button */
}