How do I fix hover not working in CSS with a div tag inside an li tag?

user_18316770 0
Viewed 43

I'm somewhat new to HTML/CSS and struggling to get a drop-down menu to appear while hovering over the selected attribute. It previously worked when my div tag was outside the li tag however it's not proper HTML5 convention having a div tag as a child tag to my ul tag. Looking to understand what I'm doing wrong. I have two separate drop downs, "Products" and "Contact Us". For Products, looking to have Currency Exchange and Service 2 to appear and under Contact Us, the French and Spanish version of it. All help is appreciated!

.nav-links li .dropdown:hover .nav-links li .dropdown-content {
  display: block;
}
<nav class="navbar">
  <ul class="nav-links">

    <li><a class="active" href="index.html"><i class="fa fa-fw fa-home"></i>Home</a></li>

    <li>
      <div class="dropdown"><a>Products<i class="fa fa-fw fa-caret-down"></i></a></div>
    </li>

    <li>
      <div class="dropdown-content"><a href="currency.php">Currency Exchange</a></div>
    </li>
    <li>
      <div class="dropdown-content"><a>Service 2</a></div>
    </li>

    <li>
      <div class="dropdown"><a href="contact.html">Contact Us<i class="fa fa-fw fa-caret-down"></i></a></div>
    </li>

    <li>
      <div class="dropdown-content"><a><span lang="fr">Contactez-nous </span><span></span></a></div>
    </li>
    <li>
      <div class="dropdown-content"><a><span lang="es">Contáctenos </span><span></span></a></div>
    </li>


    <li><a href="aboutme.html">About</a></li>
  </ul>

css html
1 Answers

If what I am seeing is correct you are wondering how to make a dropdown menu. What you have made looks like to me as to be a nav menu with just a bunch of points on it. And the way it is formatted seems to be that the dropdown content is not within the dropdown itself.

If you take a look at this: How TO - Hoverable Dropdown then it might be a bit easier to understand what it is that you need to do.

user_181004350
Related