How to make hover css menu fade in and out?

Question

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.

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.

Example 1: https://jsfiddle.net/ornbovv7/2/

Example 2: https://jsfiddle.net/aou6j8gz/1/

My 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;
}


<header class="header">

    <nav class="main-menu">
        <div>
            <ul id="menu-header-menu-1" class="menu">

                <li>link 1</li>

                <li>link 2
                     <ul class="sub-menu">
                        <li>sublink 1</li>
                        <li>sublink 2</li>
                        <li>sublink 3</li>
                        <li>sublink 4</li>
                        <li>sublink 5</li>
                    </ul>
                </li>
                <li>link 3
                </li>
            </ul>
        </div>
     </nav>

</header>

Answer 1

left -9999em and auto cannot take a transitions . auto is not a number.

You can avoid this using pointer-events and drop the left coordonates: https://jsfiddle.net/ornbovv7/3/

nav.main-menu ul li ul {
  position:absolute; 
  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;
    pointer-events:none;
    transition: opacity 0.6s ease 0s;
}

nav.main-menu ul li:hover ul {
  left:auto;
  pointer-events:auto;
  opacity:0.9;
  transition:  opacity 0.6s ease 0s ;
}

or use left:0; and li in relative position : https://jsfiddle.net/ornbovv7/4/ beside you do need to give a delay for the left transition, so it fades away before to go off the screen area

nav.main-menu ul li {
  cursor:pointer;
  display:inline-block;
  margin:10px 30px 10px 30px;
  padding:0px 20px 45px 20px;
  position:relative;
}

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:0;
  opacity:0.9;
  transition: left 0s ease 1s, opacity 0.6s ease 0s;
}

Answer 2

One way is to take advantage of the :not pseudo tag, in combination with the :hover . I wrote an article a few years ago on a similar example - you can read it here if you're interested.

I was able to get your first example to work by adding the following:

nav.main-menu ul li:not(:hover) ul {
  left:auto;
  opacity:0;
  transition: left 0s ease 0s, opacity 0.6s ease 0s;
}

Here is a link to the forked fiddle.

Hope I understood the question and goal correctly.