title: How to create hidden pop out side menu
body: <p>I have a side menu that is is hidden, but will slide out when my main div is hovered over. However, I also want to be able to hover over those objects. When both the objects and the main div aren't hovered over, the side bar should slide back to being hidden. However, because I want to be able to click on the side menu, the z-index has to change after sliding out so I have a set interval, but that means, when I hover out, the z index of one will still be in place and thus it won't go back to being hidden.</p>
  
  <p>How do I create a hidden side bar that slides out when a main div is hovered over and stays showing when you hover over the side bar, being able to click on the side bar buttons too, but when you hover out of both the sidebar and the main div, the sidebar slides back to being hidden?</p>
  
  <p>Jsfiddle: <a href="http://jsfiddle.net/aritro33/RY87e/1/embedded/result/" rel="nofollow">http://jsfiddle.net/aritro33/RY87e/1/embedded/result/</a></p>
  
  <p>Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato"&gt;
  &lt;div class="profile_card"&gt;
  
      &lt;div class="profile"&gt;
          &lt;div class="avatar_image"&gt;
               &lt;h1 id="grade"&gt;A&lt;/h1&gt;
  
          &lt;/div&gt;
          &lt;div class="inner_content"&gt;
               &lt;h2 class="name" id="name"&gt;Math&lt;/h2&gt;
   &lt;span id="desc"&gt;
          &lt;p class="description" id="desc_one"&gt;Megan Babat &lt;/p&gt;
        &lt;p class="description" id="desc_two"&gt;Room 207, Raisin Building &lt;/p&gt;&lt;/span&gt;
  
              &lt;div class="social_links"&gt; &lt;span class="bottom entypo-mail"&gt;&lt;/span&gt;  &lt;span class=" bottom entypo-phone"&gt;&lt;/span&gt;
   &lt;span class="bottom entypo-cloud"&gt;&lt;/span&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "box"&gt;
          &lt;div class="sidemenu1" id="sidemenu1"&gt; &lt;span class="menuicon entypo-plus"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class="sidemenu2" id="sidemenu2"&gt; &lt;span class="menuicon entypo-eye"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@import url(http://weloveiconfonts.com/api/?family=entypo);
  
  /* entypo */
  [class*="entypo-"]:before {
      font-family:'entypo', sans-serif;
  }
  @font-face {
      font-family:'Museo';
      src: url("http://rocket-design.fr/fonts/museo/museo.eot?") format("eot"), url("http://rocket-design.fr/fonts/museo/museo.woff") format("woff"), url("http://rocket-design.fr/fonts/museo/museo.ttf") format("truetype");
  }
  * {
      -webkit-font-smoothing: antialiased;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      font-weight: 300;
      line-height: 24px;
      letter-spacing: .02em;
  }
  html, body {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
  }
  body {
      background: #333333 url(http://sandbox.lucasbonomi.com/img/blur/Retina-Size/10.jpg) no-repeat center center;
      background-size: cover;
  }
  .profile_card {
      height: 230px;
      width: 260px;
      margin: 15vh auto;
      border-radius: 1px;
  }
  .profile_card .header, .profile_card .profile {
      height: 230px;
      width: 100%;
      float: left;
  }
  .profile_card .header:before {
      content:'';
      display: block;
      width: 100px;
      height: 28px;
      background: #f9f9f9;
      position: relative;
      z-index: 1;
      margin: 15em auto 0;
  }
  .profile_card .header .inner_head {
      position: relative;
      margin-top: -16.8em;
      width: 260px;
      height: 230px;
      -webkit-transition: background 0.3s ease;
      -moz-transition: background 0.3s ease;
      transition: background 0.3s ease;
  }
  .profile_card .header .inner_head a {
      font-size: 1.4em;
      padding: 1.5em 0.5em 0 1em;
      display: inline-block;
      color: transparent;
      text-decoration: none;
      width: 23%;
      text-align: center;
  }
  .profile_card .header .inner_head a i {
      position: absolute;
      margin-top: 2em;
      text-align: center;
      display: block;
      display: none;
      font-style: normal;
      left: 0;
      right: 0;
      margin: 2.8em auto;
      font-family:"Museo", Helvetica, sans-serif;
      color: #fff;
  }
  .entypo-eye, .missing {
      color: #c0392b !important;
  }
  .ma {
      position: absolute;
      margin-top: 2em;
      text-align: center;
      display: block;
      font-style: normal;
      left: 0;
      right: 0;
      margin: 3.1em auto;
      font-family:"Museo", Helvetica, sans-serif;
      color: #fff;
      font-size: 20px;
  }
  .profile_card .header .inner_head a:hover i {
      display: block;
  }
  .profile_card .header .inner_head a span {
      margin-left: -.5em;
      margin-top: -1em;
      display: block;
  }
  .profile_card .header .inner_head a {
      color: #fff;
  }
  .profile_card .header:hover a:nth-child(1):hover {
      color: #2ecc71;
  }
  .profile_card .header:hover a:nth-child(2):hover {
      color: #2ecc71;
  }
  .profile_card .header:hover a:nth-child(3):hover {
      color: #2ecc71;
  }
  .profile_card .header:hover a:nth-child(4):hover {
      color: #2ecc71;
  }
  .profile_card .header .inner_head {
      background: rgba(0, 0, 0, 0.5);
  }
  .profile_card .profile {
      background: #232323;
      font-family:"Museo", serif;
      border-left: 2px solid rgba(255,255,255,.5);
      border-bottom: 2px solid rgba(255,255,255,.5);
      border-top: 2px solid rgba(255,255,255,.5);
  }
  .profile_card .profile .avatar_image {
      width: 82px;
      height: 82px;
      background-size: 100%;
      border-radius: 100%;
      background-color: #232323;
      margin: -1.2em auto;
      border: 5px solid #2ecc71;
      position: relative;
      bottom: 1.6em;
      z-index: 3;
  }
  .profile_card .profile .inner_content {
      width: 92%;
      height: 212px;
      float: left;
      margin: -2.2em 4%;
      background: #f9f9f9;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 1px;
  }
  .profile_card .profile .inner_content .name {
      color: #959595;
      font-size: .9em;
      text-align: center;
      padding: .3em 0 .2em;
      line-height: 2;
      border-top: 0.1em solid rgba(0, 0, 0, 0.2);
      border-bottom: 0.1em solid rgba(0, 0, 0, 0.2);
      font-family:"Lato";
      font-weight: 400;
      margin: 2.8em auto;
      width: 75%;
      margin-bottom: 1em;
  }
  .profile_card .profile .inner_content .description {
      font-size: .75em;
      text-align: center;
      line-height: .5;
      font-weight: 100;
      font-family:"Lato";
      padding: .2em .5em -.1em;
      color: #ababab;
      text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.8);
      position: relative;
      top: .6em;
  }
  .profile_card .profile .inner_content ul {
      list-style: none;
      padding: 0;
      width: 80%;
      height: 3.5em;
      display: block;
      margin: 1em auto;
  }
  .profile_card .profile .inner_content ul li {
      display: block;
      float: left;
      padding: 0;
      margin: .75em 0 0 1.25em;
      text-align: center;
  }
  .profile_card .profile .inner_content ul li:hover a {
      color: #7f8c8d;
  }
  .profile_card .profile .inner_content ul li a {
      color: #95a5a6;
      text-decoration: none;
      text-align: center;
  }
  .profile_card .profile .inner_content ul li a span {
      line-height: 1;
  }
  h1 {
      color: white;
      font-size: 40px;
      text-align: center;
  }
  .social_links {
      text-align: center;
  }
  .bottom {
      font-size: 30px;
      padding: 23px;
      color: #95a5a6;
      position: relative;
      top: 1em;
  }
  .bottom:hover {
      color: #2ecc71;
  }
  
  .sidemenu1, .sidemenu2{
      text-align: center;
      height: 50px;
      width: 50px;
      background: #232323;
      position: relative;
      left: 16.1em;
      bottom: 2.85em;
  
  
  
  }
  
  .sidemenu1{
          border-right: 2px solid rgba(255,255,255,.5);
       border-top: 2px solid rgba(255,255,255,.5);
  }
  
  .sidemenu2{
              border-right: 2px solid rgba(255,255,255,.5);
       border-bottom: 2px solid rgba(255,255,255,.5);
  }
  
  .entypo-eye{
      top: -2.5em;
      font-size: 32px !important;
  }
  
  .menuicon{
      color: white !important;
      font-size: 40px;
      position: relative;
      bottom: 3.2em;
  }
  
  .sidemenu1:hover{
      background-color:#2ecc71;
  }
  
  .sidemenu2:hover{
      background-color:#f1c40f;
  }
  
  .profile_card .sidemenu2 { 
      position: relative;
    left: 13.5em;    
      opacity: 1; 
      z-index: -1;
      -webkit-transition: all 0.3s ease-out;
         -moz-transition: all 0.3s ease-out;
          -ms-transition: all 0.3s ease-out;
           -o-transition: all 0.3s ease-out;
              transition: all 0.3s ease-out;
  }
  
  .sidemenu1 { 
      position: relative;
    left: 13.5em;    
      opacity: 1; 
      z-index: -1;
      -webkit-transition: all 0.3s ease-out;
         -moz-transition: all 0.3s ease-out;
          -ms-transition: all 0.3s ease-out;
           -o-transition: all 0.3s ease-out;
              transition: all 0.3s ease-out;
  }
  
  .profile:hover .sidemenu2{
      left: 16.12em;
  }
  
  
  
  .profile:hover .sidemenu1{
      left: 16.12em;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$("#grade").hover(function () {
      document.getElementById("grade").innerHTML = "95";
  });
  
  $("#grade").mouseout(function () {
      document.getElementById("grade").innerHTML = "A";
  });
  
  $('.profile').hover(function(){
      setInterval(function(){document.getElementById("sidemenu1").style.zIndex="1"; document.getElementById("sidemenu2").style.zIndex="1";}, 150);
  });
  </code></pre>