Перемещение непрозрачности наведения на дочерние объекты

Question

Я пытаюсь создать непрозрачность перехода дочернего элемента, когда родительский элемент завис. Может кто-то, пожалуйста, объясните мне, почему это не работает, я уверен, что это дублированный вопрос, но я не могу приспособить какие-либо подобные вопросы для решения моей проблемы, пожалуйста, простите мою немоту.

http://jsfiddle.net/vg0hLstr/1/

<nav> 
    <ul> 
     <li><a href='#'><img src='#'>hover me</a> 
      <ul> 
       <li> 
        <h1>Tell me why</h1> 
        <h2>the nested ul opacity doesn't transition</h2> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

&

nav ul { 
    position:relative; 
    width:64px; 
    margin:350px 0 0 0; /*for the fiddle*/ 
    padding:0; 
    background:#999; 
    list-style:none; 
} 

nav img {float:left width:64px; height:64px;} 
nav a {float:left;} 

nav ul li {float:left; background-color:#999;} 

nav ul li:hover > ul {display:block; opacity:1;} 

nav ul ul { 
    display:none; 
    position:absolute; 
    opacity:0.5; 
    width:300px; 
    height:200px; 
    bottom:100%; 
    transition:opacity 1s linear; 
} 

Я сделал и использовал выше меню (без перехода) для только стандартного всплывающих окон из меню, но я хотел бы перейти его непрозрачность, я видели, как некоторые сайты делают это, но я получаю супер смущенный, проходящий через код других людей. Я относительно новый & самоучкам для HTML/CSS, поэтому немного погулять от того, что я делаю неправильно, было бы очень полезно.

Благодаря

Answer 1

, возможно, это то, что вы хотите: Fiddle

первым, ваша анимация не работает, потому что вы используете стиль display: none, который не оказывал на element и не резерв для нее места , поэтому он не получит эффект анимации opacity, поэтому, если вы хотите использовать трансацию opacity, вам нужно использовать visibility: hidden, потому что хотя ваш element скрыт, он все еще там. Так что вам нужно просто изменить ваш CSS к этому

nav ul li:hover > ul {visibility:visible; opacity:1;} 

nav ul ul { 
    visibility:hidden; 
    display:block; 
    position:absolute; 
    opacity:0; 
    width:300px; 
    height:200px; 
    bottom:100%; 
    transition:opacity 1s linear, visibility 1s linear; 
} 

отмечают, что вам нужно также необходимо добавить транзакцию для visibility или иначе, это будет только поп и, когда вы наведите курсор мыши на него, а также visibility: hidden будет работать, потому что ваш элемент использует position: absolute, если нет, он оставит пробел между предыдущим и последующим element