0

I'm trying to make a navigation bar that can make the dropdown menu show on a hover. It's important that it's ONLY the <span> arrow/img element that makes the dropdown menu show, NOT the <li class="menudrop">

Is this achievable through CSS only? Or would I have to make an onClick function? I've tried but I'm struggling to make the onClick function work. Thank you in advance!

Codepen: https://codepen.io/sigurdmazanti/pen/KKWgPWq

HTML:

<nav>
  <ul>
    <li class="menudrop"><a href="#">Our dogs<span><img src="https://cdn3.iconfinder.com/data/icons/arrows-76/16/drop-down-arrow-01-512.png"></span></a>
        <ul>
          <li><a href="#">Dog profiles</a></li>
          <li><a href="#">New dogs</a></li>
        </ul>
    </li>
  </ul>
</nav>

CSS:

.menudrop span img{
    width: 30px;
    height: 20px;
}

.menudrop ul {
  display: none;
}

.menudrop span img:hover ul {
  display: block;
  position: absolute;
}
Sigurd Mazanti
  • 56
  • 6
  • 1
    If your dropdown menu is not a child or is next after targeted element it is not possible with css only. listening on `click` or `mouseenter`/`mouseleave` events is required. – ciekals11 May 17 '21 at 10:11

0 Answers0