LI Видимость не привязана к UL Высота

Question

У меня есть сайт, который я создаю для личного использования. На этом веб-сайте есть выпадающее меню, которое анимируется анимацией CSS3. Мне очень понравился внешний вид результата, пока я не понял, что элементы списка внутри неупорядоченного списка не были видимы/невидимы относительно высоты выпадающего списка. Информация, которую я ищу, - это способ ее решения. Это очень раздражает, особенно учитывая время я инвестировал в то, что кажется так просто ...

HTML Документы, касающиеся:

<ul class="dMaster"> 
    <li class="dChild"><a href="index.php" class="bItem" id="homeItem">Home</a></li> 
    <li class="dChild" style="cursor: default;">About 
     <ul class="dMaster2"> 
      <li class="dChild2"><a href="about.php" class="bItem" id="gAboutItem">General</a></li> 
      <li class="dChild2"><a class="bItem" id="twItem" target="_blank">Twitter</a></li> 
      <li class="dChild2"><a class="bItem" id="ytItem" target="_blank">YouTube</a></li> 
     </ul> 
    </li> 
</ul> 

CSS Соответствующая:

@keyframes dropdown { 
    from { height: 0px; } 
    to { height: 77px; } 
} @-webkit-keyframes dropdown { 
    from { height: 0px; } 
    to { height: 77px; } 
} 
.dMaster { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} .dChild { 
    margin: 0; 
    padding: 0; 
    height: 19px; 
    width: 60px; 
    float: left; 
    list-style: none; 
} .dChild:hover { 
    color: #000; 
    background: #C60; 
    border: 1px solid #FFF; 
    border-top: none; 
    text-shadow: 1px 1px 5px #FFF; 
} .dMaster2 { 
    padding: 0; 
    position: absolute; 
    min-width: 60px; 
    text-align: center; 
    background: #C60; 
    border: 1px solid #FFF; 
    margin: -2px 0 0 -1px; 
    visibility: hidden; 
} .dChild2 { 
    opacity: 0.5; 
    padding: 2px 5px; 
    list-style: none; 
    -webkit-transition: opacity 0.4s; 
    -moz-transition: opacity 0.4s; 
    -o-transition: opacity 0.4s; 
} .dChild2:hover { 
    opacity: 1.0; 
} ul li:hover ul { 
    color: #FFF; 
    visibility: visible; 
    animation: dropdown 0.2s ease-out; 
    -webkit-animation: dropdown 0.2s ease-out; 
} 

Я пробовал для час или два с множеством разных методов безрезультатно. Если необходимо, есть JSFiddle here. Любая помощь очень популярна!

Сторона примечания: Выпадающее меню находится в разделе About. Сначала это может быть не очевидно, но элементы списка видны, когда UL распространяется вниз.

Answer 1

Просто добавьте одну строку кода, и вы должны быть в порядке:

.dMaster2 { 
    /*...*/ 
    overflow:hidden; 
} 

sidenotes:

Ради usabilities вы должны уменьшить анимацию макс. 1 секунда. Пользователи не хотят ждать 2 секунды для раскрывающегося списка.

Для этого вам не нужны ключевые кадры, просто анимируйте свойство height элемента ul.

.dMaster2 { 
    /*...*/ 
    visibility:hidden; /* <- remove this line! */ 
    overflow:hidden; 
    transition:height .3s; /*add height transition, use ~ .5s */ 
    /* if you add the transition to the root element both, mousein and mouseout 
     will be animated, which is not the case if you put it on the :hover */ 
    height:0;    /*add height property */ 
} 
ul li:hover ul { 
    color: #FFF; 
    visibility: visible; 
    height:102px;  /*add height property */ 
    /* if you put the transition here, only the mousein will be animated */ 
} 

Your modified fiddle

Answer 2

май that быть тем, что вы ищете?

В основном для каждой линии используется различный transition-delay.

Я постарался сделать все более ясным на этом fiddle, когда я не был в последнем. Вы должны действительно проверить второй для хорошей точки vue.

Целью является достижение их отображения по одному. Два решения для этого:

1. Уникальный идентификатор в строке
2. Используйте п-е-ребенок, чтобы получить каждую линию.

Предположим, у нас есть 3 объекта для отображения в 3s. Вот наше время линия:

t  Action 
_____________ 
0 | The rectangle begins to display. 
    | 
1 | Rectangle at 1/3 of its height. We display our item n° 1. 
    | 
2 | Rectangle at 2/3 of its height. We display our item n° 2. 
    | 
3 | Rectangle at 3/3 of its height. We display our item n° 3. 
    v 

Давайте ревю код:

HTML

<a>Hover me</a> 

<ul> 
    <li>Hey</li> 
    <li>Hi</li> 
    <li>Ho</li> 
</ul> 

Наша цель проста:

Мы хотим, что если перетащить мышь над тегом <a>, он постепенно отображает <ul> и различными элементами <li>. Более того, мы хотим, чтобы он оставался, если мышь находится над меню, но мгновенно исчезает, если мышь выходит из <a> или <ul>.

CSS

Основы

ul { /* Hidden and width no height */ 
    visibility: hidden; 
    background-color: white; 
    height: 0px; 
    border: 1px solid black; 
} 

a:hover ~ ul { /* When the mouse goes over the <a> it becomes visible and begins the transition */ 
    visibility: visible; 
    background-color: orange; 
    height: 60px; 
    transition: height 3s; 
} 

Теперь мы перейдем к "Хитрость":

a:hover ~ ul li { /* Default behaviour for appearing */ 
    opacity: 1; 
    transition: opacity 0.2s; 
} 

/* And now for each child, its custom delay :*/ 

a:hover ~ ul li:nth-child(1) { 
    transition-delay: 1s; 
} 

a:hover ~ ul li:nth-child(2) { 
    transition-delay: 2s; 
} 

a:hover ~ ul li:nth-child(3) { 
    transition-delay: 3s; 
} 

И TADAAAAM! Очень просто !

В другую сторону, чтобы избежать их исчезнуть постепенно:

/* To make the depop instantly */ 

a ~ ul li { 
    opacity: 0; 
    transition-delay: 0s; 
} 

a ~ ul li:nth-child(1) { 
    transition-delay: 0s; 
} 

a ~ ul li:nth-child(2) { 
    transition-delay: 0s; 
} 

a ~ ul li:nth-child(3) { 
    transition-delay: 0s; 
} 

И здесь вы идете. Конечно, это не очень динамично, и если вам нужно сделать это для каждого ребенка, скоро будет скучно. Но вы можете использовать скрипты для генерации этого кода. :)

Надеюсь, это помогло.