CSS3背景弹出过渡

Question

I'm working on a new site, and my client has a transition on the menu items that he'd like to try and keep. The problem is that the menu is built in Flash ( it can be seen here ). How do I replicate that sort of movement using pure CSS? While I could probably just do this with Javascript, I'd like to do it with pure CSS if that's at all possible.

Note that the text movement isn't necessary, but it would be nice if it were possible to do that too. Here's the HTML for the list as I have it currently.

<div class="menu-main-container">
<ul id="menu-main" class="top_nav inline unstyled">
  <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item active page_item page-item-59 current_page_item menu-item-61"><a href="http://ali.moberemk.com/">Home</a></li>
  <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://ali.moberemk.com/buyers/">Buyers</a></li>
  <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://ali.moberemk.com/sellers/">Sellers</a></li>
  <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://ali.moberemk.com/about-me/">About Me</a>
    <ul class="sub-menu">
      <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://ali.moberemk.com/testimonials/">Testimonials</a></li>
    </ul>
  </li>
  <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://ali.moberemk.com/listings/">Listings</a></li>
  <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://ali.moberemk.com/contact-me/">Contact Me</a></li>
</ul>
</div>

Answer 1

Take a look at this demo: http://webinfocentral.com , a little image in bottom-right corner. It implements CSS3 animation. If this is what you are looking for, I will include the code snippet below (pure CSS3 solution).

Also, these effects can be achieved by using jQuery: .slideUp() ( http://api.jquery.com/slideUp/ ) and .slideDown() ( http://api.jquery.com/slideDown/ )