Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

davidjesse

Meu Menu Drop Down Não Desaparece Quando Clico Nele

Por , em Desenvolvimento frontend

Recommended Posts

davidjesse    0

davidjesse
Postado

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"></script>
<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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito