Meu Menu Drop Down Não Desaparece Quando Clico Nele
Olá pessoal. Estou fazendo um sistema web. Fiz um menu DropDown em css, mas não consigo fazer o submenu desaparecer quando clico nele. Já tentei por JavaScript e jQuery, adicionado, removendo classes, dando hide e show, mas só consegui e ele não aparecesse mais. Gostaria de, no li:hover conseguir fazer-lo desaparecer do mesmo modo, que, se tirasse o ponteiro do mouse do elemento. Alguém sabe como fazer isso? Aqui, eu coloquei o script e o css no mesmo arquivo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Sistema Comercial</title>
<script src="[http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">](http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js)
<script type="text/javascript">
$(document).ready(function () {
$("li ul a").click(function () {
$("#texto").text($(this).text() + ": aqui é exibido, via ajax, o conteúdo das funções referentes a " + $(this).text());
});
})
</script>
<style type="text/css">
*{margin: 0; padding: 0;}
body{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
.menu{
list-style:none;
border:1px solid #c0c0c0;
float:left;
}
.menu li{
position:relative;
float:left;
border-right:1px solid #c0c0c0;
}
.menu li a{color:#333;
text-decoration:none;
padding:5px 10px;
display:block; }
.menu li a:hover{
background:#333;
color:#fff;
box-shadow:0 3px 10px 0 #CCC;
text-shadow:0px 0px 5px #fff;
}
.menu li ul{
position:absolute;
top:23px;
left:0;
background-color:#fff;
display:none;
}
.menu li:hover ul, .menu li.over ul{display:block;}
.menu li ul li{
border:1px solid #c0c0c0;
display:block;
width:150px;
}
#topo {
height: 30px;
background-color: orange;
box-shadow: 2px 2px 3px black;
}
</style>
<body>
<div id="topo">
<nav>
<ul class="menu">
<li><a href="#">Cadastros</a>
<ul>
<li><a href="#" onclick="indicaClick('Clientes')">Clientes</a></li>
<li><a href="#" onclick="indicaClick('Fornecedores')">Fornecedores</a></li>
<li><a href="#" onclick="indicaClick('Colaboradores')">Colaboradores</a></li>
<li><a href="#" onclick="indicaClick('Estados')">Estados</a></li>
<li><a href="#" onclick="indicaClick('Municípios')">Municípios</a></li>
<li><a href="#" onclick="indicaClick('Bairros')">Bairros</a></li>
</ul>
</li>
<li><a href="#">Vendas</a></li>
<li><a href="#">Aquisições</a> </li>
<li><a href="#">Pagamentos</a></li>
</ul>
</nav>
</div>
<div id="conteudo">
<h1 id="texto">Aqui vai o conteudo via ajax</h1>
</div>
</body>
</html>Discussão (0)
Carregando comentários...