Simple Jquery slideToggle on Hover Menu

by tucado

HTML

<nav>
    <ul id="menu-main">
        <li><a href="#">Home</a>
        </li>
        <li class="dropdown-toggle"> <a href="#">About</a>

            <ul class="submenu">

            <li>
              <a href="#">
                <img src="https://www.avehire.co.uk/images/img_1.png" class="img-responsive">
                <p>Conference</p>
              </a>            
            </li>
            <li>
              <a href="#">
                <img src="https://www.avehire.co.uk/images/img_3.png" class="img-responsive">
                <p>Conference</p>
              </a>            
            </li>
            <li>
              <a href="#">
                <img src="https://www.avehire.co.uk/images/img_4.png" class="img-responsive">
                <p>Conference</p>
              </a>            
            </li>
            <li>
              <a href="#">
                <img src="https://www.avehire.co.uk/images/img_1.png" class="img-responsive">
                <p>Conference</p>
              </a>            
            </li>

            </ul>
        </li>
        <li class="dropdown-toggle"> <a href="#">Services</a>

            <ul class="submenu">

            <li>
              <a href="#">
                <img src="https://www.avehire.co.uk/images/img_2.png" class="img-responsive">
                <p>Option</p>
              </a>            
            </li>
            <li>
              <a href="#">
                <img src="https://www.avehire.co.uk/images/img_2.png" class="img-responsive">
                <p>Option</p>
              </a>            
            </li>
            <li>
              <a href="#">
                <img src="https://www.avehire.co.uk/images/img_2.png" class="img-responsive">
                <p>Option</p>
              </a>            
            </li>
            <li>
              <a href="#">
                <img src="https://www.avehire.co.uk/images/img_2.png" class="img-responsive">
               ...

CSS

nav {
  position: relative;
}

#menu-main > li {
    display: inline-block;
    padding: 10px 15px;
    background: #ddd;
    margin: 0 5px;
}

li.dropdown-toggle {
    padding-right: 25px !important;
}

.dropdown-toggle: after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    border: 5px solid transparent;
    border-top: 5px solid green;
}

.submenu {
    display: none;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background: #eee;
    overflow: hidden;
}

.submenu a {
	display: block !important;
	width: 150px;
	color: #333;
	padding: 5px;
	margin: 5px 10px;
	text-decoration: none;
	float: left;
  text-align: center;
}

.submenu a img {
  width: 100%;
}

.submenu li a {
  display: flex;
  flex-wrap: wrap;
}

.submenu li a > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.submenu li a > a > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

JavaScript

$('li.dropdown-toggle').on('hover', function () {
    $(this).find(".submenu").slideToggle(200);
});