Start CSS transition at one point - html

Question

I'm using a CSS transition to show the sub-menu. The main-menu sits in the right hand column and the sub-menu appears when the user hovers over it. The first menu items slides out of the left on the menu and then the other menu items drop down from it.
The problem I have is that the sub-menu needs to be wider than the main-menu and when the user hovers over, the menu starts too far over the right. I want the menu to get bigger at the same speed that it moves out but where it will have reached the maximum width before it's finished moveing. How to I achieve this?
.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

There is some work on it and had to restructure the CSS, but it is basically like follows:
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%;
}
... and of course the JSfiddle as well. :)