css - 为什么我的下拉菜单没有出现在悬停时？

Question

为什么下拉菜单在 css hover 上不起作用？我在 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 邻居。但是你也可以像这样在整个 .drop-menu 之后结束你的 a。

<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 标签，因为它官方只允许包含内联元素，另外，我删除了 top 来自 ul li ul.drop-menu。仅在 absolute 元素上使用 top, left, right, bottom。

我还更改了 CSS 子菜单上的 hover。我现在使用了 > 选择器，这意味着:获取所选父项的 DIRECT 子项。文档 here

.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: black;
    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;
    text-align: left;
}

.drop-menu {
    display: none;
}

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

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