Problem with mouse over in image

Question

I would like to know how I can move my menu in an image I made. I wanted to put the menu on the left side for example. Here is my menu: https://gyazo.com/3cc836a7cb1b825800abe4f8b0b309e7

Here is my code:

<!-- Icon -->
    <div id="user">
        <img id="icon" align="left" style="position:absolute; top:2%; right:7.3%; " width="100px" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-128.png"  >
         <div id="nav_menu" style="position:absolute; top:2%; right:7.3%; ">
            <ul>
                <li id="l1"> -- </li>
                <li> -- </li>
                <li> -- </li>
                <li> -- </li>
            </ul>
   </div>

JS

  $("#icon").mouseover(function() {
            $('#nav_menu').slideDown();
        });

    $("#icon").mouseleave(function(){
            $('#nav_menu').slideUp();
    });

Answer 1

#user {
  position: relative;
}
#user #nav_menu {
  position: absolute;
  left: 100px;
  top: 0;
  background-color: #000;
  width: 100px;
  visibility: hidden;
  height: 0;
  transition: all 0.25s ease;
  overflow: hidden;
}
#user:hover #nav_menu {
  visibility: visible;
  height: 100px;
}

#user #nav_menu ul li {
  color: #FFF;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Icon -->
<div id="user">
  <img id="icon" align="left" width="100px" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-128.png">
  <div id="nav_menu">
    <ul>
      <li id="l1">Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </div>
</div>