Problem with mouse over image

Navigation
1

I'd like to know how I can move my menu into an image I've made. I wanted to put the menu on the left side for example. Here's my menu: link

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"><divid="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();
    });
    
asked by anonymous 04.01.2017 / 10:26

1 answer

4

#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--><divid="user">
  <img id="icon" align="left" width="100px" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-128.png"><divid="nav_menu">
    <ul>
      <li id="l1">Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </div>
</div>
    
04.01.2017 / 11:18
Recursive function with strings - Python CSS architecture, could anyone explain me? [closed]