title: How to make hover css menu fade in and out?
body: <p>I have an unordered list menu in my header that has submenus on parent list items.
  I've been trying to set the :hover pseudo-class to make the submenus fade in and out when moving the cursor over the links.</p>
  
  <p>The problem is that I can only make them fade in, so when I move the cursor away they don't fade out, they just disappear instantly.
  I'm not sure what I'm doing wrong, but I've included a second jsfiddle below in which I've managed to achieve the effect I want with some simpler html.</p>
  
  <p>Example 1: <a href="https://jsfiddle.net/ornbovv7/2/" rel="nofollow">https://jsfiddle.net/ornbovv7/2/</a></p>
  
  <p>Example 2: <a href="https://jsfiddle.net/aou6j8gz/1/" rel="nofollow">https://jsfiddle.net/aou6j8gz/1/</a></p>
  
  <p>My code:</p>
  
  <pre><code>.header {
    width:100%;
    height:100px;
    background-color:#fff;
  }
  
  .content {
    width:100%;
    height:500px;
    background-color:pink;
  }
  
  nav.main-menu ul {
    position:relative;
    top:30px;
    list-style:none;
  }
  
  nav.main-menu ul li {
    cursor:pointer;
    display:inline-block;
    margin:10px 30px 10px 30px;
    padding:0px 20px 45px 20px;
  }
  
  nav.main-menu ul ul {
    position:absolute; 
    left:-999em;
    width:175px;
    display:block; 
    height:auto;
    margin:40px 0px 0px 0px;
    padding:0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
    background-color:#ffffff;
    opacity:0;
  
    transition: left 0s ease 0.6s, opacity 0.6s ease 0s;
  }
  
  nav.main-menu ul li:hover ul {
    left:auto;
    opacity:0.9;
    transition: left 0s ease 0s, opacity 0.6s ease 0s;
  }
  
  nav.main-menu ul ul li {
    position:relative;
    float: none;
    padding: 7px 10px 7px 10px;
  }
  
  nav.main-menu ul ul li a {
    display:inline-block;
  }
  
  
  &lt;header class="header"&gt;
  
      &lt;nav class="main-menu"&gt;
          &lt;div&gt;
              &lt;ul id="menu-header-menu-1" class="menu"&gt;
  
                  &lt;li&gt;link 1&lt;/li&gt;
  
                  &lt;li&gt;link 2
                       &lt;ul class="sub-menu"&gt;
                          &lt;li&gt;sublink 1&lt;/li&gt;
                          &lt;li&gt;sublink 2&lt;/li&gt;
                          &lt;li&gt;sublink 3&lt;/li&gt;
                          &lt;li&gt;sublink 4&lt;/li&gt;
                          &lt;li&gt;sublink 5&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;link 3
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
       &lt;/nav&gt;
  
  &lt;/header&gt;
  </code></pre>