I have been searching for a solution but I can't find any that fits to what I woluld like to get. I have an icon and want the dropdown menu opened when HOVER in sreen size larger than *980px*, and then when CLICK in screen size smaller than 980px.

This is the code.

```js
/*Hide menu by default*/
$("#menu").hide();

/*When menu button is clicked, toggle the menu*/
$("#menu-btn").click(function() {
  $("#menu").slideToggle();
});

$("#menuser").hide();

/*When menu button is clicked, toggle the menu*/
$("#ser_btn").click(function() {
  $("#menuser").slideToggle();
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
  <a href="#"><img src="images/icon.png" style="height:50px; width:50px;"></a>
</div>

<!--Menu-->
<nav id="menu">
  <ul>
    <li>INICIO</li>
    <li>LA BELLE</li>
    <li id="ser_btn">SERVICIOS
      <ul id="menuser">
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
      </ul>
    </li>
    <li>NOTICIAS</li>
    <li>CONTACTO</li>
  </ul>
</nav>
```

I would appreciate any help.