Wie man Hover CSS-Menü ein- und ausblenden?

Question

Ich habe ein ungeordnetes Listenmenü in meiner Kopfzeile, das Untermenüs für die übergeordneten Listenelemente enthält. Ich habe versucht, die Pseudo-Klasse: Hover zu setzen, damit die Untermenüs ein- und ausgeblendet werden, wenn der Mauszeiger über die Links bewegt wird.

Das Problem ist, dass ich sie nur einblenden lassen kann, also wenn ich den Cursor weg bewege, verschwinden sie nicht, sie verschwinden einfach sofort. Ich bin mir nicht sicher, was ich falsch mache, aber ich habe eine zweite jsfiddle unten eingeschlossen, in der ich geschafft habe, den Effekt zu erzielen, den ich mit etwas einfacherem HTML will.

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

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

Mein 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

links -9999em und Auto kann keine Übergänge dauern. Auto ist keine Nummer.

Sie können dies mit Zeiger-Ereignisse vermeiden und die linken coordonates fallen: 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 ; 
} 

oder links verwenden: 0; und li in der relativen Position: https://jsfiddle.net/ornbovv7/4/ neben brauchen Sie eine Verzögerung für den linken Übergang zu geben, so dass es verschwindet, bevor weg den Bildschirmbereich gehen

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

Eine Möglichkeit ist, die Vorteile des :not Pseudo-Tages zu nehmen, mit den :hover in Kombination. Ich habe vor ein paar Jahren einen Artikel über ein ähnliches Beispiel geschrieben - you can read it here, wenn Sie interessiert sind.

konnte ich Ihr erstes Beispiel erhalten, indem Sie die folgenden arbeiten:

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.

Hoffe, dass ich die Frage richtig und Ziel verstanden.