Javascript 在css中执行下拉按钮_Javascript_Html_Css

Javascript 在css中执行下拉按钮

javascript html css

Javascript 在css中执行下拉按钮,javascript,html,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="

我试图在我的网站中加入一个下拉按钮，但我不知道为什么按钮的内容显示不正确：

    <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>


下拉列表
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}

您可以在此处尝试代码：

经过一些搜索

下面是一个下拉菜单示例，它仅使用CSS来提高性能

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


下拉列表

经过一些搜索

下面是一个下拉菜单示例，它仅使用CSS来提高性能

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


下拉列表

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

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

这就解决了显示问题

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

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

这就解决了显示问题