在某一点开始 CSS 过渡

Question

我正在使用CSS过渡来显示子菜单。主菜单位于右侧列中，当用户将鼠标悬停在其上时，将显示子菜单。第一个菜单项从菜单左侧滑出，然后其他菜单项从中下拉。

我遇到的问题是子菜单需要比主菜单宽，当用户将鼠标悬停在上方时，菜单在右侧开始太远。我希望菜单以与移出相同的速度变大，但在完成移动之前已达到最大宽度。我该如何实现？

.mainmenu ul li ul{
  margin-left: 0;
  max-height:61px;
  width:263px;
  overflow: hidden;
  -webkit-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;
  -moz-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;	
  -o-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;	
  -ms-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;
  transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in, width 0s ease-in 1s;
}
.mainmenu li:hover ul{
  margin-left: -262px;
  width:263px;
  max-height: 999px;
  -webkit-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
  -moz-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
  -o-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
  -ms-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
  transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s, width 0s ease-in;
}
#mobile_menu .mainmenu li ul{	
  display: block;
  position:static;
  margin: 0;
  max-height: 999px;
}

<div id="mobile_menu">
  <div class="mainmenu">
    <ul>
      <li><a href='/home-0.html' class='active'  >Home</a></li>
      <li><a href='/blog-25.html' class=''  >Blog</a></li>
      <li>
        <a href='/contact-us-8.html' class=''  >Contact Us</a>
        <ul>
          <li><a href='/contact-us/find-us-27.html' >Find Us</a></li>
          <li><a href='/contact-us/about-us-28.html' >About Us</a></li>
          <li><a href='/contact-us/meet-the-team-29.html' >Meet the Team</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

有一些工作，不得不重组CSS，但它基本上是这样的：

.HTML：

<div id="mobile_menu">
    <div class="mainmenu">
        <ul>
            <li><a href='#' class='active'>Home</a></li>
            <li><a href='#' class=''>Blog</a></li>
            <li>
                <a href='#' class=''>Contact Us</a>
                <ul>
                    <li><a href='#'>Find Us</a></li>
                    <li><a href='#'>About Us</a></li>
                    <li><a href='#'>Meet the Team</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

.CSS：

#mobile_menu .mainmenu {
    width: 100px;
}
#mobile_menu .mainmenu ul {
    padding: 0;
    width: 100px;
}
#mobile_menu .mainmenu ul li {
    list-style: none;
}
#mobile_menu .mainmenu ul li ul {
    height: 18px;
    margin-left: 0;
    margin-top: -18px;
    overflow: hidden;
    -webkit-transition: height 1s 1s, margin-left 1s, width 1s;
    -moz-transition: height 1s 1s, margin-left 1s, width 1s;
    -o-transition: height 1s 1s, margin-left 1s, width 1s;
    transition: height 1s 1s, margin-left 1s, width 1s;
    width: 0;
}
#mobile_menu .mainmenu ul li:hover ul {
    height: 100px;
    margin-left: 100px;
    width: 100%;
}

。当然还有JSfiddle。:)