LI能见度不受UL高度限制-LIVisibilityNotTiedtoULHeight

I've got a website I'm building for personal use. This website has a dropdown menu that is animated by CSS3 animations. I quite enjoyed the look and feel of the result, until I realize that the List Items inside the Unordered List weren't visible/invisible relative to the dropdown's height. The information I seek is a method of resolving this. It's very annoying, especially given the time I've invested into something that seems so simple...

我有一个个人网站。这个网站有一个下拉菜单是由CSS3动画。我很喜欢结果的外观和感觉，直到我意识到无序列表中的列表项相对于下拉列表的高度是不可见/不可见的。我寻找的信息是解决这个问题的一种方法。这很让人讨厌，尤其是考虑到我花时间去做一些看起来很简单的事情……

Pertinent HTML:

相关的HTML:

    
Home
    
About
        

            
General
            
Twitter
            
YouTube
        
    

Pertinent CSS:

相关的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;
}

I've tried for an hour or two with many different techniques without avail. If needed, there's a JSFiddle here. Any help is greatly appareciated!

我试了一两个小时，用了很多不同的技术，但都没有效果。如果需要，这里有一个JSFiddle。任何帮助都是显而易见的!

Side note: The dropdown menu is on the About. It may not be apparent at first, but the List Items are quite visible when the UL is extending downward.

侧边注:下拉菜单在左右。一开始可能不是很明显，但是当UL向下扩展时，列表项是很明显的。

2 个解决方案

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

.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 */
}

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

Hover me


    
Hey
    
Hi
    
Ho

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  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;
}

/* 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;
}