hello everybody

I have a list like this


Code:
  
<ul id="main_menu">
        <li><a href="#">Comments</a></li>
        <li><a href="#">Advertising</a>
            <ul>
                <li><a href="#">edit/delete  ads</a></li>
                <li><a href="#">Add Ads</a></li>
            </ul>
        </li>
        <li><a href="#">Groups</a></li>
        <li><a href="#">Members</a>
            <ul>
                <li><a href="#">Edit /  Delete Member</a></li>
                <li><a href="#">Add Member</a></li>
            </ul>
        </li>
        <li><a href="#">Photo</a>
            <ul>
                <li><a href="#">edit /  Delete Photo</a></li>
                <li><a href="#">Add a  picture</a></li>
            </ul>
        </li>
        <li><a href="#">Sections</a>
            <ul>
                <li><a href="#">Edit / Delete  section</a></li>
                <li><a href="#">Add  Section</a></li>
            </ul>
        </li>
        <li><a href="#">General  Settings</a></li>
        <li><a href="#">Home</a></li>
    </ul>
This list contains lists of 8, including 4 lists contain children (Advertising,Members,Photo,Sections)

And I've written this code but did not work very well


Code:
function MainMenu(item){
    var MenuItems = document.getElementById('main_menu');
    for (var i = 0; i < MenuItems.children.length; i++) {
        MenuItems.children[i].children[1].style.display = "none";
    }
    item.children[1].style.display = "block";
}


What i needed is when i press a list containing the submenus Close all open lists Then open this menu