What is making these subnavs expand?

I’m looking at http://voky.com.ua/showcase/sky-mega-menu/examples/demo-personal.html and I can’t figure out what is making the subnavs expand. For example, hover over “Portfolio” and see the subnav expand. I’ve inspected all the elements around the nav items and I can’t find any CSS3 transition and I also can’t see Javascript adding any style attributes to the elements or adding any classes.

Answer

There are two parts to this;

The expanding effect is achieved by setting the scale property to (0,0) when the menu is closed and then (1,1) when its visible, and having a transition property for the animating timing. Here are the relevant lines;

/* line 60 */
.sky-mega-menu li > div {
  ...
  -o-transition: -o-transform 0.4s, opacity 0.4s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}

/* line 374  */
.sky-mega-menu-anim-scale li > div {
  -o-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
}

/* line 380 */
.sky-mega-menu-anim-scale li:hover > div {
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

The visibility of the submenu on hover is achieved by setting it’s opacity to 0 and then 1 when you hover on the respective li

/* line 60 */
.sky-mega-menu li > div {
  ...
  opacity: 0;
}

/* line 101 */
.sky-mega-menu li:hover > div {
  opacity: 1;
}