why is the menu bar not displaying when i hover over?

The drop down menu is supposed to be displayed when I hover over 'get start' but it doesn't. When I delete the display: none the links do display but when I attempt to display as I hover it doesn't display. How do I fix this problem (css code) ? The css is embedded in the style tag.

nav ul {
  background: url(transparent.png);
  width: 100%;
  height: 52px;
  text-align: center;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  letter-spacing: 0.2em;
  font: normal 100% arial, sans-serif;
  text-align: center;
  display: inline-block;
  margin: 10px 0 0 10px;
  padding: 9px 26px 9px 26px;
  text-transform: uppercase;
}

nav ul li a:hover {
  color: #000;
  background-color: #fff;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  background: #f9f9f9;
  min-width: 160px;
  position: absolute;
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background: #bada55;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<header>
  <h1>Model United Nations Conference</h1>
  <img src="dove.png" alt="a simple dove logo">

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a id="start" href="#">Get started</a></li>
      <li class="dropdown">
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Forum</a></li>
    </ul>
  </nav>
</header>

Im not sure what exactly is wrong.

2 answers

  • answered 2017-10-11 10:20 K K

    Change the HTML structure of the dropdown to :

        <li class="dropdown"><a id="start" href="#">Get started</a>
            <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </li>
    

    With current structure i.e.:

      <li><a id="start" href="#">Get started</a></li>
      <li class="dropdown">
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    

    the .dropdown never gets the hover effect because of the collapsed size of li element. Demo:http://jsfiddle.net/lotusgodkk/GCu2D/2163/

  • answered 2017-10-11 10:20 ovokuro

    Your HTML structure needed some adjusting.

    Basically, nest the dropdown menu within a li.

    nav ul {
      background: url(transparent.png);
      width: 100%;
      height: 52px;
      text-align: center;
      padding: 0;
      margin: 0;
    }
    
    nav ul li {
      display: inline;
    }
    
    nav ul li a {
      text-decoration: none;
      /*changed for demo*/
      color: #000;
      letter-spacing: 0.2em;
      font: normal 100% arial, sans-serif;
      text-align: center;
      display: inline-block;
      margin: 10px 0 0 10px;
      padding: 9px 26px 9px 26px;
      text-transform: uppercase;
    }
    
    nav ul li a:hover {
      color: #000;
      background-color: #fff;
    }
    
    .dropdown {
      position: relative;
    }
    
    .dropdown-content {
      background: #f9f9f9;
      min-width: 160px;
      position: absolute;
      left: 0;
      display: none;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      height: auto;
    }
    
    .dropdown-content li {
      display: block;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .dropdown-content a:hover {
      background: #bada55;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    <header>
      <h1>Model United Nations Conference</h1>
      <img src="dove.png" alt="a simple dove logo">
    
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li class="dropdown"><a id="start" href="#">Get started</a>
            <ul class="dropdown-content">
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
            </ul>
          </li>
    
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Forum</a></li>
        </ul>
      </nav>
    </header>