LI Visibility not tied to UL height

Question

I have a website that I create for personal use. This website has a drop-down menu that animates with CSS3 animations. I really liked the look of the result, until I realized that the list items inside the unordered list were not visible / invisible relative to the height of the drop-down list. The information I'm looking for is a way to solve it. This is very annoying, especially considering the time I invested in something that seems so simple ...

Relevant 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> 

Matching 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 tried for an hour or two with different methods to no avail. If necessary, there is a JSFiddle here . Any help is very easy to use!

Note: The drop-down menu is located in the About section. At first, this may not be obvious, but list items are visible when UL extends downward.

Answer 1

Just add one line to your code and everything will be fine:

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

sidenotes:

For ease of use, you should reduce the animation to max. 1 second. Users do not want to wait 2 seconds for the drop-down list.

You don’t need keyframes for this, just animate the height property of the ul element.

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

Modified violin

Answer 2

May which be what you are looking for?

Basically, a different transition-delay used for each row.

I tried to make everything clearer in this fiddle when I was not in the latter. You should really check out the second for a good vue point.

The goal is to display them one at a time. Two solutions for this:

• Unique identifier in a string
• Use nth-child to get each line.

Say we have 3 elements to display in 3s. Here is our timeline:

 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 

Let revue code:

HTML

 <a>Hover me</a> <ul> <li>Hey</li> <li>Hi</li> <li>Ho</li> </ul> 

Our goal is simple:

We want that if we drag the cursor over the <a> tag, it will consistently show <ul> and various <li> elements. Moreover, we want it to stay if the mouse is above the menu, but will instantly disappear if the mouse leaves <a> or <ul> .

CSS

The basics

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

Now we move on to the "difficult part":

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

And TADAAAAM ! Easy peasy!

On the other hand, to avoid their gradual disappearance:

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

And here you go. Of course, this is not very dynamic, and if you need to do this for each child, it will soon be boring. But you can use scripts to generate this code. :)

Hope this helps.