title: Horizontal Div Expand Animation for Menu
body: <p>SO,</p>
  
  <p>I'm building a custom menu for a site with a fixed width. I'm trying to create a "menu" that is actually just a horizontal row comprised of DIVs (a DIV for each menu item). I've included an image to communicate the functionality I'm attempting to achieve: <img src="https://i.stack.imgur.com/Q6mmu.jpg" alt="enter image description here">
  In the image, <em>figure 1</em> is the top-level row of DIVs. Figure 2 shows what happens to the row on placing the cursor over the top-level item "Professional development": that div expands to fill the width of the entire menu area, revealing several other DIVs which are acting as sub-menu items. Finally, figure 3 shows what happens when the cursor hovers over a top-level div that isn't already on the left side of the container: since the DIV must expand to the left and right to fill the container, the "Very Long Menu Item" moves to the left so its child DIVs are to the right.</p>
  
  <p>I've been able to use Jquery to animate expanding DIVs or create accordions, but I can't figure out how to create this kind of animation, especially since multiple top-level items are involved. Any help is greatly appreciated!</p>
  
  <p>-Marca</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I've added a <a href="http://jsfiddle.net/YqxAR/24/" rel="nofollow noreferrer">JSfiddle</a> that achieves the desired functionality on a couple of the buttons through CSS hover pseudo-classes, but where I'm at a loss is how to <em>animate</em> the change with JQuery. When I place the cursor on "Professional Development," that div expands to the right and left to reveal other divs acting as sub-menu items - but the expansion is instantaneous as one would expect with just CSS. </p>