0

I have the following two-level menu:

 <ul class="mid-nav-top-ul">

            <li class="mid-nav-top-li"><a class="mid-nav-top-a">Trading News</a>
                <ul class="mid-nav-two-ul">
                    <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Articles</a></li>
                    <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Stocks</a></li>
                    <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Forex</a></li>
                    <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Commodities</a></li>
                    <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Options</a></li>
                </ul>
            </li>

        </ul>

I have the following CSS to make it a drop-down sort of menu:

.mid-nav-two-ul{height: 0px; -webkit-transition: height 0.5s;  transition: height 0.5s;}
.mid-nav-top-ul:hover .mid-nav-two-ul{height: auto;}

It doesn't take into account the transition - it drops down/ changes height instantaneously.

Any ideas?

Thanks

yolo191919
  • 11
  • 2
  • Possible duplicate of: http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto – tsujp Oct 06 '14 at 16:38

1 Answers1

1

Firstly, setting the height of the menu ul won't necessarily affect what's visible. If the overflow is set to hidden, e.g. overflow: hidden; then the height change will affect content inside because we then understand what to do with 'overflowing' content.

Secondly, we cannot animate the height property directly, you must use max-height. You can then set max-height to be some arbitrary value that is guaranteed to be higher than your ul list will ever be.

Here's working code:

.mid-nav-two-ul
{
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: max-height 0.5s; 
    transition: max-height 0.5s;

}

.mid-nav-top-ul:hover .mid-nav-two-ul
{
    max-height: 1000px;
}

Here's a working JSFiddle for you.

tsujp
  • 1,066
  • 1
  • 12
  • 29