javascript - 在CSS中做一个下拉按钮

标签 javascript html css

我想在我的网站中加入一个下拉按钮,但我不知道为什么按钮的内容没有正确显示:

    <body> 
        <div class="topnav">
            <a id="inicio"  href="index.php">Inicio</a>
            <a id="contacto" href="login.php" >Login</a>
            <a id="contacto" href="registro.php">Registro</a>
            <a id="contacto" href="#" >Contacto</a>
            <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">Dropdown</button>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#home">Iniciar sesion</a>
                </div>
            </div>
            <input type="text" placeholder="Search..">
        </div> 
<script>
    function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}
</script>

    </body>

您可以在这里尝试代码:https://jsfiddle.net/pgn6yw5f/

最佳答案

在您的 CSS 文件中设置下拉内容 a 的背景颜色。下面是一个例子

dropdown-content a {
    /* Your other styling */
    background-color: inherit;
}

解决了显示问题。

关于javascript - 在CSS中做一个下拉按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59236879/

相关文章:

javascript - 多个文件的 HTML 视频播放器

javascript - 使用来自不同 JS 文件的 extjs Store

html - 使 HTML5 输入类型 ="number"接受破折号

javascript - jQuery 隐藏下拉菜单或文本(实时搜索)输入焦点上的 Div

html - 表格div的动态宽度

javascript - 后续 anchor 标记在 html/php 中不起作用

python - 如何使用 BeautifulSoup 获取页面上特定文本后面的一些内容?

javascript - 通过鼠标单击更改 div 的样式,然后通过第二次单击将其改回

css - 两个div,一个固定宽度,另一个,其余

javascript - 将 JSON 属性转换为 int php