Hover not working in dropdown menu?

Using glitch.com and trying to create a simple dropdown menu. I have used a guide and tried to make the simplest version so that I am not missing anything. However, I just cant get the hover to work for me.

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

ul li {
  display: inline-block;
}

ul li a {
  height: 50px;
  min-width: 120px;
  line-height: 50px;
  background-color: black;
  text-decoration: none;
  text-align: center;
  display: block;
  color: #ffffff;
}

li ul {
  display: none;
}

li ul li {
  display: block;
  float: none;
}

ul li a:hover + .hidden, .hidden:hover {
  display:block;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <script src="/script.js" defer></script>
  </head>
  <body>
    <ul>
      <li><a href="#">HOME</a></li>
      <li>
        <a href="#">ABOUT</a>
        <ul id="hidden">
          <li><a href="#">Team</a></li>
          <li><a href="#">Project</a></li>
          <li><a href="#">News</a></li>
        </ul>
      </li>
      <li><a href="#">CONTACT US</a></li>
    </ul>
  </body>
</html>

Feeling pretty defeated by this with no clear idea why its not working. I have messed around with the hover statement just to get it to work but to no avail.

1 answer

  • answered 2018-01-15 01:34 Josh Adams

    Css targets ID with # and Class with period .

    You have hidden as an ID so you could:

    Change your css to

    ul li a:hover + #hidden, #hidden:hover {
      display:block;
    }
    

    or html to:

    <ul class="hidden">
    

    ul {
      padding: 0;
      margin: 0;
      position: absolute;
      list-style: none;
    }
    
    ul li {
      display: inline-block;
    }
    
    ul li a {
      height: 50px;
      min-width: 120px;
      line-height: 50px;
      background-color: black;
      text-decoration: none;
      text-align: center;
      display: block;
      color: #ffffff;
    }
    
    li ul {
      display: none;
    }
    
    li ul li {
      display: block;
      float: none;
    }
    
    ul li a:hover + #hidden, #hidden:hover {
      display:block;
    }
    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello!</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/styles.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <script src="/script.js" defer></script>
      </head>
      <body>
        <ul>
          <li><a href="#">HOME</a></li>
          <li>
            <a href="#">ABOUT</a>
            <ul id="hidden">
              <li><a href="#">Team</a></li>
              <li><a href="#">Project</a></li>
              <li><a href="#">News</a></li>
            </ul>
          </li>
          <li><a href="#">CONTACT US</a></li>
        </ul>
      </body>
    </html>