1

I am trying to make my HTML/CSS work so when I hover over a list item the other ul appears. The code I have doesn't seem to work.

I made a JSFiddle

.dropdown-content {
  display: none;
}

.navbar>li, a:hover + .dropdown-content {
  display: block;
}
<body>
  <div class="navbar">
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">One</a></li>
      <li><a href="#">One</a></li>
    </ul>
  </div>

  <div class="dropdown-content">
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">One</a></li>
      <li><a href="#">One</a></li>
    </ul>
  </div>
</body>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • `.dropdown-content` is not an adjacent sibling of any `a` element, its the great-grandfather's sibling. – Quentin Aug 18 '16 at 17:53
  • I don't think it works like that.. you'll have to add the `:hover` on the `.nvbar` class since it is the one adjacent to the `'.dropdown-content`, the `li` is not.. you will have to use JS or JQuery to get this done using `.mouseover()` or `.hover()` – bakz Aug 18 '16 at 18:02

0 Answers0