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

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 >
  <ul >

    <li><a  href="index.html"><i ></i>Home</a></li>

    <li>
      <div ><a>Products<i ></i></a></div>
    </li>

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

    <li>
      <div ><a href="contact.html">Contact Us<i ></i></a></div>
    </li>

    <li>
      <div ><a><span lang="fr">Contactez-nous </span><span>