Reversing CSS3 Transition delays

Question

I have a nested list which I want to display when the user hovers over the parent list item. I was the list to move from the left and when it's in position to dropdown. I'm able to get it to do this but when the user unhover I want to dropdown the reverse before it moves back to the left but everything I do causes the list to move back before the dropdown reverses.

Can anyone help me get the un-hover order correct.

.mainmenu li ul li{
    width:263px;
}

.mainmenu ul li ul{
    margin-left: 0;
    max-height:61px;
    overflow: hidden;
    -webkit-transition: margin-left 0.3s ease-in, max-height 1s ease-in 1s;
    -moz-transition: margin-left 0.3s ease-in, max-height 1s ease-in 1s;
    -o-transition: margin-left 0.3s ease-in, max-height 1s ease-in 1s;
    -ms-transition: margin-left 0.3s ease-in, max-height 1s ease-in 1s;
    transition: margin-left 0.3s ease-in, max-height 0.3s ease-in 1s;
}

.mainmenu li:hover ul{
    margin-left: 262px;
    max-height: 999px;
    -webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -o-transition-duration:1s;
    -ms-transition-duration:1s;
    transition-duration:1s;
    -webkit-transition-delay: margin-left 1s, max-height 0;
    -moz-transition-delay: margin-left 1s, max-height 0;
    -o-transition-delay: margin-left 1s, max-height 0;
    -ms-transition-delay: margin-left 1s, max-height 0;
    transition-delay: margin-left 1s, max-height 0;
}

JSFiddle Demo

Answer 1

Based on my understanding, the below is what you are looking for:

.mainmenu ul li ul {
  margin-left: 0;
  max-height: 61px;
  overflow: hidden;
  transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;
}
.mainmenu ul li:hover ul {
  margin-left: 262px;
  max-height: 999px;
  transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
}

The above code does the following:

• When the li is hovered on, the change to margin-left of the ul is transitioned immediately and it takes 0.3 seconds to complete.
• Since, the dropdown should expand only after movement is complete, a 0.3 second delay should be added to the transition of the max-height property.
• So, between 0 to 0.3 seconds the ul moves right and then between 0.3 to 1.3 seconds content starts to drop-down.
• To get the reverse to happen on hover out, the max-height should have immediate transition on the default selector (unhovered state). This should happen till the 1 second mark.
• Only after the drop-down has reversed, the margin-left should get reversed and so a delay of 1 second should be added to transition of margin-left property.
• So, between 0 to 1 second on hover out, the ul collapses and then between 1 to 1.3 seconds it moves back to its original position.

.mainmenu ul {
  background-color: #274569;
  background-image: -moz-linear-gradient(top, #274569, #1a256f);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#274569), to(#1a256f));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#274569, endColorStr=#1a256f);
}
.mainmenu li {
  background-color: #274569;
  background-image: -moz-linear-gradient(top, #274569, #1a256f);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#274569), to(#1a256f));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#274569, endColorStr=#1a256f);
}
.mainmenu li a {
  background-color: #274569;
  background-image: -moz-linear-gradient(top, #274569, #1a256f);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#274569), to(#1a256f));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#274569, endColorStr=#1a256f);
  color: #ffffff;
}
.mainmenu li a:hover {
  background-image: -moz-linear-gradient(top, #0082bd, #00628e);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0082bd), to(#00628e));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#0082bd, endColorStr=#00628e);
}
.mainmenu li:hover {
  background-image: -moz-linear-gradient(top, #0082bd, #00628e);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0082bd), to(#00628e));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#0082bd, endColorStr=#00628e);
}
.mainmenu li ul {
  background-color: #1e3c61;
  background-image: -moz-linear-gradient(top, #1a256f, #1e3c61);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1a256f), to(#1e3c61));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#1a256f, endColorStr=#1e3c61);
}
.mainmenu li ul li {
  background-color: transparent !important;
  background-image: none;
}
.mainmenu li ul li a {
  color: #ffffff;
  background-color: transparent !important;
}
.mainmenu li ul li:hover a {
  background-image: -moz-linear-gradient(top, #0082bd, #00628e);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0082bd), to(#00628e));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#0082bd, endColorStr=#00628e);
}
.mainmenu ul {
  padding: 0;
  margin: 0 0 13px 0;
  list-style: none;
}
.mainmenu li {
  margin: 0;
  line-height: 61px;
  text-align: left;
}
.mainmenu li a {
  padding: 0 0 0 20px;
  height: 61px;
  font-family: Arial;
  font-size: 13pt;
  font-weight: bold;
  text-decoration: none;
  display: block;
  width: 242px;
  position: relative;
  z-index: 1001;
}
.mainmenu li:hover {} .mainmenu li ul {
  margin: -61px 0 0 0;
  padding: 0 0 0 0;
  z-index: 1000;
  position: absolute;
  oveflow: hidden;
}
.mainmenu li ul li {
  width: 263px;
}
.mainmenu li ul li a {
  padding-left: 12px;
  display: block;
}
.mainmenu li ul li:hover {} 
.mainmenu ul li ul {
  margin-left: 0;
  max-height: 61px;
  overflow: hidden;
  transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;
}
.mainmenu ul li:hover ul {
  margin-left: 262px;
  max-height: 999px;
  transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
}

<div id="menu">
  <div class="mainmenu">
    <ul>
      <li class='menu_child'><a href='/home.html' class='active'>Home</a>
      </li>
      <li class='menu_child'><a href='/blog.html' class=''>Blog</a>
      </li>
      <li class='menu_parent'><a href='/contact-us.html' class=''>Contact Us</a>
        <ul>
          <li><a href='/contact-us/find-us.html'>Find Us</a>
          </li>
          <li><a href='/contact-us/about-us.html'>About Us</a>
          </li>
          <li><a href='/contact-us/meet-the-team.html'>Meet the Team</a>
          </li>
        </ul>
      </li>
      <li class='menu_parent'><a href='/adventure.html' class=''>Adventure</a>
        <ul>
          <li><a href='/adventure/adventurer-grandmaster.html'>Adventurer Grandmaster</a>
          </li>
        </ul>
      </li>
      <li class='menu_child'><a href='/guilds.html' class=''>Guilds</a>
      </li>
      <li class='menu_parent'><a href='/trade.html' class=''>Trade</a>
        <ul>
          <li><a href='/trade/moonsea.html'>Moonsea</a>
          </li>
          <li><a href='/trade/hillsfar.html'>Hillsfar</a>
          </li>
          <li><a href='/trade/femphrey.html'>Femphrey</a>
          </li>
          <li><a href='/trade/anvil.html'>Anvil</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>