ネストされたメニューCSSホバーフェード

Question

this menuが変更され、css opacity hover transitionが追加されました。

最初はulでのみ動作しますが、ネストされたサブulは表示されません。
https://jsfiddle.net/sh73vvgf/

フェード効果をdisplay: none;に置き換えると、サブメニューが表示されます。
https://jsfiddle.net/v8op2tqv/

どのようにしてサブメニューで作業することができますか？私はそれが純粋なhtml/cssであることが必要です。

HTML

このネストされたメニューは、惑星とそのムーンズのリストが表示されます。

<div class="nav-main"> 
    <ul> 
    <li> 
     Planets 
     <ul> 
     <li> 
      Jupiter 
      <!-- Moons --> 
      <ul> 
      <li> 
       Europa 
      </li> 
      <li> 
       Ganymede 
      </li> 
      <li> 
       Callisto 
      </li> 
      </ul> 
     </li> 
     <li> 
      Saturn 
      <!-- Moons --> 
      <ul> 
      <li> 
       Mimas 
      </li> 
      <li> 
       Dione 
      </li> 
      <li> 
       Titan 
      </li> 
      </ul> 
     </li> 
     <li> 
      Uranus 
      <!-- Moons --> 
      <ul> 
      <li> 
       Umbriel 
      </li> 
      <li> 
       Ariel 
      </li> 
      <li> 
       Oberon 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

CSS

.nav-main ul { 
    cursor: default; 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    position: relative; 
    width: 300px; 
    padding: 0; 
    margin: 0; 
    background: #000; 
    font-size: 1em; 
    color: #fff; 
    list-style: none; 
} 

.nav-main ul li { 
    display: block; 
    position: relative; 
    float: left; 
    min-width: 25%; 
    padding: 0.3em; 
    min-width: 100px; 
} 

.nav-main ul li a { 
    display: block; 
    padding: 1.2em; 
    text-decoration: none; 
    text-align: center; 
    white-space: nowrap; 
    color: #fff; 
} 

/* Hover Fade */ 
.nav-main li ul { 
    webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; 
    -moz-transition: opacity 0.3s ease-out, -moz-transform 0.3s ease-out; 
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; 
    opacity: 0; 
    height: 0; 
    width: 0; 
    overflow: hidden; 
} 
.nav-main li:hover > ul { 
    display: block; 
    position: absolute; 
    opacity: 1; 
    height: auto; 
    width: auto; 
} 

.nav-main li:hover li { 
    float: none; 
} 

.nav-main ul ul ul { 
    left: 100%; 
    top: 0; 
} 

.nav-main ul:before, 
.nav-main ul:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.nav-main ul:after { 
    clear: both; 
} 

Answer 1

私はあなたのコードのいくつかの "オーバーフロー" のスタイルを変更しました。それは、おかげだった

.nav-main ul { 
 
    cursor: default; 
 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    position: relative; 
 
    width: 300px; 
 
    padding: 0; 
 
    margin: 0; 
 
    background: #000; 
 
    font-size: 1em; 
 
    color: #fff; 
 
    list-style: none; 
 
    overflow:hidden; 
 
} 
 
.nav-main ul:hover { 
 
    overflow:visible; 
 
} 
 

 
.nav-main ul li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    min-width: 25%; 
 
    padding: 0.3em; 
 
    min-width: 100px; 
 
} 
 

 
.nav-main ul li a { 
 
    display: block; 
 
    padding: 1.2em; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    color: #fff; 
 
} 
 

 
/* Hover Fade */ 
 
.nav-main li ul { 
 
    webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; 
 
    -moz-transition: opacity 0.3s ease-out, -moz-transform 0.3s ease-out; 
 
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; 
 
    opacity: 0; 
 
    height: 0; 
 
    width: 0; 
 
    //overflow: hidden; 
 
} 
 
.nav-main li:hover > ul { 
 
    display: block; 
 
    position: absolute; 
 
    opacity: 1; 
 
    height: auto; 
 
    width: auto; 
 
} 
 

 
.nav-main li:hover li { 
 
    float: none; 
 
} 
 

 
.nav-main ul ul ul { 
 
    left: 100%; 
 
    top: 0; 
 
} 
 

 
.nav-main ul:before, 
 
.nav-main ul:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 

 
.nav-main ul:after { 
 
    clear: both; 
 
}

<div class="nav-main"> 
 
    <ul> 
 
    <li> 
 
     Planets 
 
     <ul> 
 
     <li> 
 
      Jupiter 
 
      <!-- Moons --> 
 
      <ul> 
 
      <li> 
 
       Europa 
 
      </li> 
 
      <li> 
 
       Ganymede 
 
      </li> 
 
      <li> 
 
       Callisto 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      Saturn 
 
      <!-- Moons --> 
 
      <ul> 
 
      <li> 
 
       Mimas 
 
      </li> 
 
      <li> 
 
       Dione 
 
      </li> 
 
      <li> 
 
       Titan 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      Uranus 
 
      <!-- Moons --> 
 
      <ul> 
 
      <li> 
 
       Umbriel 
 
      </li> 
 
      <li> 
 
       Ariel 
 
      </li> 
 
      <li> 
 
       Oberon 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>