Javascript 如何在单击三点图像时创建白色背景的下拉列表？

我有一个屏幕截图，如下图所示，我正在尝试用HTML、CSS和JS进行复制

此时，我能够复制三点图像，如中所示

属于三点图像的HTML代码是：

<div class="nav-top-searchbar">
    <form>
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search">
        <img src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
    </form>
</div>

.nav-top-searchbar {
    position: relative;
}

#ellipsis {
    top: 12px; // Sounds good and a bit centered [ Vertically ]
    position: absolute;
    right: 20px;
}

input[type=text] {
    width: 100%;
    background: #10314c;
}

.searchicon {
    float: left;
    margin-top: -20px;
    position: relative;
    top: 26px;
    left: 8px;
    color: white;
    z-index: 2;
}

问题陈述：

---

单击三点图像时，应创建一个下拉列表（查看状态、发布账单、添加与会者、导出为…、在谷歌工作表中查看、发送通知），如屏幕截图所示。我想知道我需要在HTML和CSS代码中做什么更改才能获得下拉列表

仅给出基本的想法，您必须在该标记上绑定click事件，如下所示：

$('.nav-top-searchbar > form > img').click(function() {
    $('.body-manage-attendees').show();
})

---

此外，通常会说，使用“ul”和“li”组合是制作下拉列表的最佳实践，而不是使用div。

给出真正基本的想法，您必须在该标记上绑定单击事件，如下所示：

$('.nav-top-searchbar > form > img').click(function() {
    $('.body-manage-attendees').show();
})

---

另外，通常有人说使用“ul”和“li”组合是制作下拉列表的最佳实践，而不是使用div。

如果没有任何javascript，您可以这样做。注意，

tabindex

在这里和元素的位置很重要。否则，只需使用javascript方式并在单击时切换类

onclick

。下拉列表{
位置：绝对位置；
宽度：200px；
高度：250px；
背景颜色：浅蓝色；
显示：无；
}
.切换者：聚焦{
大纲：无；
}
.切换器：焦点+.下拉列表{
显示：块；
}

...
你的元素在这里

不使用任何javascript，您可以这样做。注意，

tabindex

在这里和元素的位置很重要。否则，只需使用javascript方式并在单击时切换类

onclick

。下拉列表{
位置：绝对位置；
宽度：200px；
高度：250px；
背景颜色：浅蓝色；
显示：无；
}
.切换者：聚焦{
大纲：无；
}
.切换器：焦点+.下拉列表{
显示：块；
}

...
你的元素在这里

如果不允许您使用javascript，我不确定这是否可行。你可以在不使用javascript的情况下执行on:hover，但是如果你想在点击按钮时显示下拉列表，也许这是不可能的。我可以使用javascript。你认为你能提供一个JSFIDLE的例子让我明白吗？如果你不被允许使用javascript，我不确定这是否可行。你可以在不使用javascript的情况下执行on:hover，但是如果你想在点击按钮时显示下拉列表，也许这是不可能的。我可以使用javascript。你认为你能提供一个JSFIDLE的例子让我明白吗？谢谢你的解释。。你能告诉我如何把这个和我的小提琴结合起来吗？我正在尝试复制我截图中的方式。谢谢。此外，我已将内容放在下拉菜单中。下面是更新的我想知道在哪一类我必须做样式，以改变下拉列表中文本的颜色。我希望文本的颜色在下拉列表中为黑色。我尝试将

color:black

放在下面的类中，但没有成功

.dropdown{背景色：#FFFFFF；颜色：黑色；显示：无；位置：绝对；高度：150px；右侧：0；宽度：200px；z索引：10；}

a

固有蓝色。所以无论是

a{color:black}

还是

。都可以下拉a{color:black}

谢谢你的解释。。你能告诉我如何把这个和我的小提琴结合起来吗？我正在尝试复制我截图中的方式。谢谢。此外，我已将内容放在下拉菜单中。下面是更新的我想知道在哪一类我必须做样式，以改变下拉列表中文本的颜色。我希望文本的颜色在下拉列表中为黑色。我尝试将

color:black

放在下面的类中，但没有成功

.dropdown{背景色：#FFFFFF；颜色：黑色；显示：无；位置：绝对；高度：150px；右侧：0；宽度：200px；z索引：10；}

a

固有蓝色。所以要么

a{color:black}

要么

。下拉a{color:black}