Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu Magui</title>

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
$(function(){
    var menus = $("#nav1, #nav2, #nav3");
    menus.click(function(){
        menus.not(this).removeClass("menu_active");
        $(this).toggleClass("menu_active");
    });
})
</script>


<style type="text/css">
  li
  {
    color:red;
  }
  li.menu_active
  {
    color:blue;
  }
</style>

</head>

<body>

<ul>
   <li id="nav1">Inicio</li>
   <li id="nav2">Productos
     <ul>
       <li id="nav1">Galletas</li>
       <li id="nav2">Caramelos</li>
       <li id="nav3">Chocolates</li>
     </ul>
   </li>
   <li id="nav3">Contactenos</li>
</ul>

</body>
</html>