expanding and collapsing menu items

I have a menu made of divs containers and when I mouse over the menu item i want to exand the next element that has a class called container the thing I want to know is when they are expand and I go back to the previous div like back two divs I want the others to contract there widths so if three divs are open and i go back to the first div container the last or others in front contract there width to 0 except the next div cos it displays the next menu items how do do this any examples would be appreciated.

<div class="container>
    <div class="menu">
        <div>Menu Item 1</div>
        <div>Menu Item 2</div>
        <div>Men开发者_开发知识库u Item 3</div>
        <div>Menu Item 4</div>
    </div>
</div>
<div class="container>
    <div class="menu">
        <div>Menu Item 5</div>
        <div>Menu Item 6</div>
        <div>Menu Item 7</div>
        <div>Menu Item 8</div>
    </div>
</div>
<div class="container>
    <div class="menu">
        <div>Menu Item 9</div>
        <div>Menu Item 10</div>
        <div>Menu Item 11</div>
        <div>Menu Item 12</div>
    </div>
</div>

$('.container .menu .menu-item').mousenter(function() {
    $(this).closest('.container').next('.container').css('width' 200);
});

---

Wow, that was a long sentence...please use punctuation (and run grammar check).

In answer to your question, you could set all the containers' widths to 0 before running the next line of your code, like this:

$('.container').css('width': 0);
$(this).closest('.container').next('.container').css('width' 200);

If you use this method you should probably also save $('.container') in a variable for better performance.

Is that what you wanted to do? If not, please explain your question a little more clearly.