I am trying to make a hover-over accordion. 

**What I would like to achieve:**

When the mouse hovers over a menu, all sub-menus underneath open, but the remaining menus remain collapsed.
(Simply, it's an accordion, but it's triggered by hovering instead of clicking.)

**What I have achieved:**

When I hover the parent menu, it opens the sub-menus.

**What I haven't achieved:**

Once my mouse leaves the parent menu, even if it is still over the sub-menu, the sub-menu collapses.
(Simply, my mouse cannot leave the parent menu. I cannot click the sub-menu links.)

**HTML:** 

```
 <div class="accordion">
          <ul>
            <li class="parentmenu"><a href="#"><i class="fas fa-home"></i> Home</a></li>
            <ul class="dropdown">
              <li><a href="#">Home Submenu 1</a></li>
              <li><a href="#">Home Submenu 2</a></li>
            </ul>
            <li class="parentmenu"><a href="#"><i class="fas fa-address-card"></i> About</a></li>
            <ul class="dropdown">
              <li><a href="#">About Submenu 1</a></li>
              <li><a href="#">About Submenu 2</a></li>
            </ul>
            <li class="parentmenu"><a href="#"><i class="far fa-edit"></i> Services</a></li>
            <ul class="dropdown">
              <li><a href="#">Services Submenu 1</a></li>
              <li><a href="#">Services Submenu 2</a></li>
            </ul>
            <li class="parentmenu"><a href="#"><i class="fas fa-id-card-alt"></i> Contact</a></li>
            <ul class="dropdown">
              <li><a href="#">Contact Submenu 1</a></li>
              <li><a href="#">Contact Submenu 2</a></li>
            </ul>
          </ul>
        </div>

```

**CSS:** 

```
.dropdown{
  display:none;
}

.deployed {
  display: block;
}

```

**JQuery:**

```
<script>
      jQuery(document).ready(function() {
        $('.parentmenu').hover(function() {
        if ($(this).next().css('display') == 'none'){
            $(this).next().addClass('deployed');
        }
          else {
          $(this).next().removeClass('deployed');
        }
        });
      });

```