menu ativo!
gostaria q alguem me ajudasse a deixar meu menu ativo ao clicar no link, que o hover permanece em cada click, ficasse selecionado indicando qual pagina esta.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Cantora Gospel</title>
<meta name="">
<meta name="decription" content="">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body id="home">
<header>
<img src="imagens/img.png">
</header>
<div class="container">
<nav id="menu">
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="perfil.html">Perfil</a></li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="discografia.html">Discografia</a></li>
</ul>
</nav>
<section>Conteudo</section>
<aside>Relacionado</aside>
<footer>Roda Pé</footer>
</div>
</body>
</html>meu codigo css.
*{
margin: 0px;
padding:0px;
font-family: arial;
}img{
width:100%;
margin:-36px;
}nav#menu ul{
list-style:none;
position: relative;
top: -10px;
left: 30%;
}nav#menu li{
display:inline-block;
padding:10px;
}nav#menu a{
color: #fff;
text-decoration:none;
padding:10px;
}nav#menu a:hover{
color:#000;
}li:hover{
background:#fff;
}header{
background-color:#fff;
width:100%;
text-align:center;
border:1px solid #000;
padding: 0px;
}section{
background-color:#fff;
margin-top:10px;
width:900px;
height:500px;
float:left;
}aside{
margin-left:10px;
background-color:#fff;
width:290px;
margin-top:10px;
height:500px;
float:left;
margin-bottom:10px;
}footer{
background-color:#fff;
width:1200px;
height: 100px;
clear:both;
}
.container{
background-color:#ccc;
border:1px solid #000;
width:1200px;
margin:auto;
}Discussão (9)
Carregando comentários...