Почему мое выпадающее меню не появляется при наведении курсора?

Question

Почему выпадающее меню не работает при наведении курсора мыши?Я видел, как люди делают это на 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 в вашем коде, так как официально разрешено содержать только встроенные элементы. Кроме того, я удалил top из ul li ul.drop-menu.Используйте top, left, right, bottom только на absolute элементах.

Я также изменил hover в подменю в CSS.Теперь я использовал селектор >, что означает: получить DIRECT дочерний элемент выбранного родителя.Документы здесь

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