<div id="menu">
			<ul>
				<li id="posts_menu"><a href="post">Todos Posts</a></li>
				<li id="chat_menu"><a href="chat">Chat</a></li>
				<li id="agenda_menu"><a href="#">Agenda</a></li>
				<li id="arquivo_menu"><a href="arquivos">Arquivos</a></li>
			</ul>
</div>
#menu{
	width: 100%;
	height: 36px;
	background-color: #469c17;
}
#posts_menu{
	margin-left: 39px;
}
#posts_menu, #chat_menu, #agenda_menu, #arquivo_menu{
	line-height: 36px;
	float: left;
	list-style: none;
}
#posts_menu a, #chat_menu a, #agenda_menu a, #arquivo_menu a{
	display: block;
	width: 100px;
	text-align: center;
	background-color: #469c17;
	text-decoration: none;
	color: black;
}
#posts_menu a:hover, #chat_menu a:hover, #agenda_menu a:hover, #arquivo_menu a:hover{
	background-color: white;

}
var menu = document.querySelectorAll("#menu > ul > li > a");

for(var i = 0; i < menu.length; i++){
	menu[i].addEventListener("click", configMenu);
}

function configMenu(){
	for(var i = 0; i < menu.length; i++){
		menu[i].style.background = "#469c17";
	}
	this.style.background = "white";
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.