Problema no css passando o mouse no meu ele esta abrindo o menu

[jeffersonquintiliano 0]

Boa tarde

Gostaria de ajuda
Preciso que quando eu passar o mouse não fazer nenhuma ação e quando e clicar meu menu descer,

e so recolher quando eu clicar no mesmo menu o outro menu

/* Some stylesheet reset */
ul.nav, .nav>li, .nav>li>a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

ul.nav {
	line-height: 1;
}

.nav, .nav ul {
	position: relative;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 170px;
}

	.nav li, .nav ul li {
		display: block;
		position: relative;
		padding: 0;
		margin: 0;
	}

	.nav>li>a {
		/* Layout */
		position: relative;
		display: block;
		width: 150px;
		padding: 10px 10px 10px 10px;
		border-top: 1px solid #cfcfcf;
		border-left: 1px solid #cfcfcf;
		border-right: 1px solid #cfcfcf;

		/* Texto */
		font-family:Verdana, Geneva, sans-serif;
		font-weight: bold;
		font-size: 11px;
		text-decoration: none;
		color: #696969;

		background: #eeeeee; 
		background: -webkit-linear-gradient(bottom, #eaeaea, #f4f4f4); /* Background for Chrome & Safari */
		background: -ms-linear-gradient(bottom, #eaeaea, #f4f4f4); /* Background for Internet Explorer 10 */
		background: -moz-linear-gradient(bottom, #eaeaea, #f4f4f4); /* Background for Firefox */
		background: -o-linear-gradient(bottom, #eaeaea, #f4f4f4); /* Background for Opera */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eaeaea',GradientType=0);
	}

	.dropdown>a::after {
		 content: "";
		 position: absolute;
		 top: 1px;
		 right: 10px;
		 width: 0px;
		 height: 0px;


		 border-top: 5px solid #000000;
		 border-left: 4px solid transparent;
		 border-right: 4px solid transparent;
		 border-bottom: 5px solid transparent;
		}


	.

	/* Subtle drop shadow for the last navigation link */
	.nav>li:last-child>a {
		border-bottom: 1px solid #696969;
		box-shadow: inset 0px 1px 0px #fff,
					0px 1px 1px rgba(60, 60, 60, .1);
	}

	/* The dropdown list elements containing the sub-links */
	.nav ul li {
		position: absolute;
		height: 0px;
		top: -9999px;

		/* Creating the slide effect using transitions */
		-webkit-transition: height .3s ease-out;
		-ms-transition: height .3s ease-out;
		-moz-transition: height .3s ease-out;
		-o-transition: height .3s ease-out;
	}

	.nav li:hover li {
		/* Expanding the list elements */
		height: 30px;
		position: relative;
		top: auto;
	}

	/* The dropdown menu's links */
	.nav ul li a {
		/* Layout & positioning */
		position: relative;
		display: block;
		width: 160px;
		padding: 8px 10px 10px 10px;
		border-top: 2px solid #ffffff; /*padrao e1e1e1  cor da linha*/

		/* Text */
		font-family:Verdana, Geneva, sans-serif;
		font-weight: normal;
		font-size: 10px;
		text-decoration: none;
		border-left: 3px solid #cfcfcf; /*cor da linha lateral*/
		border-right: 1px solid #cfcfcf;
		background: white;
		color: #000000;	
	}
	/* The hover state of the dropdown menu links */
	.nav ul li a:hover {
		color: #787878;
	}
	.nav .dropdown:hover li:first-child a {
		box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .12);
		border-top: 1px solid #cfcfcf;
	}
	.nav li:last-child ul li:last-child a {
		border-bottom: 1px solid #cfcfcf;
		box-shadow: 0px 1px 1px rgba(60, 60, 60, .1);
	}

[brianleonny 0]

block

[L. Henrique 179]

Jefferson,

No seu CSS, o menu está declarado pra aparecer no :hover. Se você quiser que ele apareça num click e só retorne ao clicar fora ou em um close button você vai precisar de um evento onclick.

Exemplo:

$('#botao_abrir').click(function() {
   $('#menu').toggleClass('aberto');
});

Ao clicar no botão, se ele tiver a classe aberto, ele remove. Se ele não tiver, ele adiciona. Esse é o conceito do toggleClass.

Abraços!

[jeffersonquintiliano 0]

Bom dia L Henrique

 

Sou bem leigo em CSS como seria que ficaria ?

[L. Henrique 179]

Bom dia Jefferson!

Isso não é CSS, é jQuery (Biblioteca de Javascript).

Eu criei uma DEMO com o efeito que você quer e deixei tudo lá dentro bem explicado. Talvez você se confunda um pouco na hora de utiliza-lo (lembrando que o código utilizado foi jQuery, então no seu projeto você precisará chamar uma biblioteca de jQuery).

Essa biblioteca você pode adicionar antes do </body>. Segue o código dela:

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>

Qualquer dúvida, retorne no post que responderei.

Abraços!