Question

为什么下拉菜单在css悬停上不起作用？我见过有人在youtube上做，而且看起来很简单。

HTML

<div class ="top-bar">
            <div class="row">
                <img class="logo" src="Images/logo-blanco.png" alt="logo">
                <div class="nav">
                    <ul>
                        <li><a href="#" id="inicio">Inicio</a></li>
                        <li><a href="#" class="drop">Demos</a>
                            <ul class="drop-menu">
                                <li><a href="#" class="color" id="castellano">Castellano</a></li>
                                <li><a href="#" class="color">Ingles</a></li>
                                <li><a href="#" class="color">Videos</a></li>
                            </ul>

                        </li>
                        <li><a href="#" >Como Trabajo</a></li>
                        <li><a href="#">Quien Soy</a></li>
                        <li><a href="#">Hablan de mi</a></li>
                        <li><a href="#">Contacta</a></li>
                        <li><a href="#" id="blog">Blog</a></li>
                    </ul>
                </div> 
            </div>
        </div>

CSS

.nav {
    width: 100%;
    min-width: 80%;
    position: relative;
    left: 15%;
    top: 20px;
}

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}



ul li {
    float: left;
    width: 100px;
    height: 40px;
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size: 65%;
    margin-right: 2px;

}

ul li a {
    text-decoration: none;
    color: white;
    display: block;
}

ul li a.color {
    color: black;
    border-bottom: 0.5px solid rgb(80, 80, 80);
    border-left: 0.5px solid rgb(80, 80, 80);
    border-right: 0.5px solid rgb(80, 80, 80);
    font-size: 130%;
    width: 150px;
    text-align: left;
    padding-left: 10px;
    box-shadow: 1px 1px 2px rgba(179, 176, 176, 0.5);

}

ul li ul.drop-menu {
    position: relative;
    top: 20px;
    text-align: left;
}

.drop-menu {
    display: none;
}

.drop:hover .drop-menu{
    display: block;
}

我对此很陌生，因此希望我已经包含了足够的代码。我想也许是其他原因阻止了它？

Answer 1

那是因为您的CSS不正确。您的.drop-menu类不在drop类中，而是它的旁边。

我想如果您将CSS更改为此：

.drop-menu {
    display: none;
}

.drop:hover + .drop-menu{
    display: block;
}

它将起作用。 +运算符用于选择CSS邻居。但是您也可以像这样在整个a之后结束.drop-menu。

<li>
 <a href="#" class="drop">Demos
   <ul class="drop-menu">
        <li><a href="#" class="color" id="castellano">Castellano</a></li>
        <li><a href="#" class="color">Ingles</a></li>
        <li><a href="#" class="color">Videos</a></li>
   </ul>
 </a>
</li>

然后您的CSS是正确的，您不必更改它。

编辑：我在代码中删除了a标记，因为它仅被正式允许包含内联元素，而且，我从{{1 }}。仅在top元素上使用ul li ul.drop-menu。

我还更改了CSS子菜单上的top, left, right, bottom。现在，我使用了absolute选择器，这意味着：获得所选父级的 DIRECT 子级。文件here

hover

为什么我的下拉菜单没有悬停显示？

1 个答案: