嵌套菜单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>