Activar solo un elemento de un menu

[spocnic]

Mi problema es el siguiente:

Tengo una pagina sencilla que tiene un menu que muestra varias secciones de la pagina, la pagina es de solo una pagina, es decir que todo el código para las diferentes secciones esta solamente en el index, todo funciona perfectamente, lo unico que me falta es que al hacer clic en un elemento del menu este se quede activado y los demas se desactiven:

ejemplo:
La fuente de menu esta en color negro, al hacer clic en contacto por ejemplo, contacto se debe volver de color blanco, al hacer clic en home, home se debe volver blanco y contacto debe volver a su estado inicial, es decir de color negro.

Alguien me prodria ayudar, estoy muy atorado en esta parte y no logro solucionarlo, muchas gracias.

Ejemplo del código:

Código HTML:

<nav>
                    <ul class="container">
                        <li class="menu">
                            <ul>
                                <li class="button"><a href="#">Menu<br>uno<p class="mas" id="masQuienes">+</p></a></li>
                                <li class="dropdown">
                                    <ul id="nav">
                                        <li class="boton current"><a href="#seccion1">submenu1</a></li>
                                        <li class="boton"><a href="#seccion2">submenu2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
 
                        <li>
                            <ul>
                                <li><a href="#seccion3">menu2<p class="mas">+</p></a></li>
                                <li class="dropdown">
                                    <ul id="servicosDropdown">
                                        <li class="boton"><a href="#seccion4">submenu3</a></li>
                                        <li class="boton"><a href="#seccion5">submenu4</a></li>
                                        <li class="boton"><a href="#seccion6">submenu5</a></li>
                                        <li class="boton"><a href="#seccion7">submenu6</a></li>
                                        <li class="boton"><a href="#seccion8">submenu7</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
 
                        <li class="menu" id="contactoLi">
                            <ul>
                                <li class="button"><a href="#seccion9">Menu3<p class="mas">+</p></a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
 

Código CSS:

ul.container{
    float: left;
    width:255px;
}
ul li{
    margin-right: 10px;
    padding-top: 5px;
    line-height: 19px;
    list-style:none;
    text-align:right;
    color: white;
    letter-spacing: 4px;
    font-weight: lighter;
}
li.button a{
    display:block;
    padding-right: 64px;
    font-size:30px;
    height:40px;
    overflow:hidden;
    position:relative;
    color:white;
    padding-top: 5px
}
li.button a{
    margin-top: 10px;
    text-decoration:none;
}
.dropdown{
    margin-left: -212px;
    color:#9E1A96;
    display:none;
    width:350px;
}
.dropdown li a{
    font-size: 20px;
    text-decoration: none;
    color:#9E1A96;
    letter-spacing: -1px;
}
.dropdown li a:hover{
    color:white;
}
.mas {
    background-color: #9E1A96;
    width: 20px;
    float: right;
    margin-right: -38px;
    margin-top: -30px;
    display: block;
    padding: 8px 5px 8px 8px;
}
#contactoMas {
    background-color: #9E1A96;
    width: 25px;
    float: right;
    margin-right: -35px;
    margin-top: -8px;
    display: block;
    padding-right: 9px;
    padding-bottom: 3px;
    padding:7px 7px 7px 0px;
}
#masQuienes {
    margin-top: -29px;
}
#contactoLi {
    padding-top: 0px;
    height: 50px;
    margin-top: -10px;
}
ul li a p {
    color: #361249;
}
ul li:hover a p{
    background-color: white;
}
li ul li:hover p {
    background-color: white;    
}
 

El jquery que utilice para animar este menu es el [URL="https://code.google.com/p/k-blogger/downloads/detail?name=JQuery.easing.1.3.js&can=2&q="]easing.1.3.js[/URL]
y su script es el siguiente:

Código Javascript:

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */
 
    /* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
    $.easing.def = "easeOutBounce";
 
    /* Binding a click event handler to the links: */
    $('li.button a').click(function(e){
    
        /* Finding the drop down list that corresponds to the current section: */
        var dropDown = $(this).parent().next();
        
        /* Closing all other drop down sections, except the current one */
        $('.dropdown').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        
        /* Preventing the default event (which would be to navigate the browser to the link's address) */
        e.preventDefault();
    })
    
});
 

Y como les decia todo esto me funciona correctamente solo tengo que hacer que un elemento se quede seleccionado al hacer clic, y al seleccionar otro este quede activado y se desactive el anterior ya que que una sistema de una sola pagina.