CODEWITHSUNDEEP
css
user10045300
user10045300

Reputation: 427

Why my dropdown menu isn't appearing on hover?

Why the dropdown menu isn't working on css hover? I've seen people do it on youtube and it looks pretty simple.

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

I'm pretty new to this so hopefully I've included enough code. I guess perhaps something else is stopping it somewhere else?

Upvotes: 0

Views: 486

Answers (1)

Gobbin
Gobbin

Reputation: 530

That is because your css is incorrect. Your .drop-menu class isnt in the drop class, it is next to it.

I think if you change your css to this:

.drop-menu {
    display: none;
}

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

It is going to work. The + operator is for selecting css neighbours. But you can also just end your a after the whole .drop-menu like this.

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

Then your css is correct and you dont have to change that.

EDIT: i removed the a tag in your code as it is officialy only allowed to contain inline elements, Also, i removed the top from the ul li ul.drop-menu. Only use top, left, right, bottom on absolute elements.

I also changed the hover on the submenu in the CSS. I now used the > selector, which means: get the DIRECT child of the selected parent. Docs 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>

Upvotes: 2

Related Questions