0

Tenho o código abaixo:

$("ul#menu > li").find("label").hover ( function(e) {
		
		e.stopPropagation();
		
		let ul = $(this).parent().find("ul");
		
		ul.css('display', e.type == "mouseenter" ? 'flex' : 'none');
		
	});
ul {
    list-style: none;
}
a {
	text-decoration: none;
    transition: background-color 1s;
}
label {
	display: inline-block;
}

body section#menu > div.internas {
	display: flex;
	justify-content: center;	
}
body section#menu > div.internas > ul {
	display: flex;
}
body section#menu > div.internas > ul > li > * {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	border: 1px solid #CCC;
}
body section#menu > div.internas > ul > li > label {
	cursor: pointer;
	height: 50px;
}
body section#menu > div.internas > ul > li > ul> li > a : hover {
	background: #999;
}
body section#menu > div.internas > ul > li > ul> li > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 50px;
}
body section#menu > div.internas > ul > li > ul {
	display: none;
	flex-direction: column;
}
body section#menu > div.internas > ul > li > a:hover {
	background: #999;
	color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="menu">
	
	<div class="internas">
		
		<ul id="menu">
		
			<li>
				<label>Cadastrar</label>
				<ul id="menuCadastrar">
					<li><a href="/admin/cadastrar/administradores">Administradores</a></li>
					<li><a href="/admin/cadastrar/cursos">Cursos</a></li>
					<li><a href="/admin/cadastrar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/cadastrar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/cadastrar/youtubers">Youtubers</a></li>
				</ul>
		    </li>
		
			<li>
				<label>Editar</label>
				<ul id="menuEditar">
					<li><a href="/admin/editar/administradores">Administradores</a></li>
					<li><a href="/admin/editar/cursos">Cursos</a></li>
					<li><a href="/admin/editar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/editar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/editar/youtubers">Youtubers</a></li>
				</ul>
			</li>
			
		</ul>
		
	</div>
	
</section>

O problema é que, como o código manda, ao passar o mouse na LI, a UL interna aparece. De fato aparece!

Mas me esbarro no fato que ao me dirigir com o mouse para a UL interna eu deixo a LI da UL principal e perco o foco fechando a UL interna!

Alguma dica mais oficial?

Como vocês costumam fazer?

EDIÇÃO:

Fiz um teste aumentando o tamanho da li mas mesmo assim, ao sair do focus, ela não respeita o tamanho da LI

$("ul#menu > li").find("label").hover ( function(e) {
	
	e.stopPropagation();
	
	let ul = $(this).parent().find("ul");
	
	let qtdeLi = ul.parent().find("li").length;
	
	let altUl = qtdeLi * 50;
	
	$(this).parent().css('height', e.type == "mouseenter" ? altUl : 50);
	
	ul.css('display', e.type == "mouseenter" ? 'flex' : 'none');
	
});
ul {
    list-style: none;
}
a {
	text-decoration: none;
    transition: background-color 1s;
}
label {
	display: inline-block;
}

body section#menu > div.internas {
	display: flex;
	justify-content: center;	
}
body section#menu > div.internas > ul {
	display: flex;
}
body section#menu > div.internas > ul > li > * {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	border: 1px solid #CCC;
}
body section#menu > div.internas > ul > li > label {
	cursor: pointer;
	height: 50px;
}
body section#menu > div.internas > ul > li > ul> li > a : hover {
	background: #999;
}
body section#menu > div.internas > ul > li > ul> li > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 50px;
}
body section#menu > div.internas > ul > li > ul {
	display: none;
	flex-direction: column;
}
body section#menu > div.internas > ul > li > a:hover {
	background: #999;
	color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="menu">
	
	<div class="internas">
		
		<ul id="menu">
		
			<li>
				<label>Cadastrar</label>
				<ul id="menuCadastrar">
					<li><a href="/admin/cadastrar/administradores">Administradores</a></li>
					<li><a href="/admin/cadastrar/cursos">Cursos</a></li>
					<li><a href="/admin/cadastrar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/cadastrar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/cadastrar/youtubers">Youtubers</a></li>
				</ul>
		    </li>
		
			<li>
				<label>Editar</label>
				<ul id="menuEditar">
					<li><a href="/admin/editar/administradores">Administradores</a></li>
					<li><a href="/admin/editar/cursos">Cursos</a></li>
					<li><a href="/admin/editar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/editar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/editar/youtubers">Youtubers</a></li>
				</ul>
			</li>
			
		</ul>
		
	</div>
	
</section>

Depois da explicação do colega Hugo, inclusive me puxando a orelha com razão, kkk, fiz outra tentativa.

Mas, Hugo, por favor, não me entenda mal. Eu não gosto de copiar códigos prontos. Acho mais importante entender que copiar.

Fiz outra tentativa seguinte sua resposta mas ainda continuo com o mesmo problema de perder a UL ao sair da li.

  body section#menu > div.internas {
display: flex;
justify-content: center;
}
body section#menu > div.internas > ul {
display: flex;
}
body section#menu > div.internas > ul > li > label {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
cursor: pointer;
border: 1px solid #CCC;

}
body section#menu > div.internas > ul > li > label:hover {
background: #CCC;
}
body section#menu > div.internas > ul > li > label:hover + ul {
display: flex;
}
body section#menu > div.internas > ul > li > ul  {
display: none;
flex-direction: column;
}
body section#menu > div.internas > ul > li > ul > li > a  {
display: flex;
align-items: center;
height: 50px;
border: 1px solid #CCC;
padding-left: 5px;
}
body section#menu > div.internas > ul > li > ul > li > a:hover  {
background: #CCC;
color: #fff;
}
   <section id="menu">

<div class="internas">
	
	<ul>
	
		<li>
			<label>Cadastrar</label>
			<ul>
				<li><a href="/admin/cadastrar/administradores">Administradores</a></li>
				<li><a href="/admin/cadastrar/cursos">Cursos</a></li>
				<li><a href="/admin/cadastrar/fornecedores">Fornecedores</a></li>
				<li><a href="/admin/cadastrar/tecnicos">Técnicos</a></li>
				<li><a href="/admin/cadastrar/youtubers">Youtubers</a></li>
			</ul>
	    </li>
	
		<li>
			<label>Editar</label>
			<ul>
				<li><a href="/admin/editar/administradores">Administradores</a></li>
				<li><a href="/admin/editar/cursos">Cursos</a></li>
				<li><a href="/admin/editar/fornecedores">Fornecedores</a></li>
				<li><a href="/admin/editar/tecnicos">Técnicos</a></li>
				<li><a href="/admin/editar/youtubers">Youtubers</a></li>
			</ul>
		</li>
		
	</ul>
	
</div>

</section>

Onde errei dessa vez?

2
  • Legal que vc chegou a um resultado satisfatório, valeu a força
    – hugocsl
    7/10/2019 às 14:24
  • #tmjjuntosempre, eu que agradeço! 7/10/2019 às 14:37

2 Respostas 2

1

Cara já te falei, vc precisa para e estudar um pouco CSS. Vc está repetindo dois IDs iguais em dois elementos diferentes. Está criando classes com concatenações desnecessária e sem sentido tipo body section#menu > div.internas > ul > li > ul

inserir a descrição da imagem aqui

E para finalizar se problema nem precisa de jQuery para resolver, só com CSS resolve, o que acontece é que vc tem que dar display:flex no UL do sub-menu quando vc fizar :hover na LI pai dessa UL sub-menu, só isso.

#menuX > li:hover ul {
    display: flex !important;
}


ul {
    list-style: none;
}

a {
    text-decoration: none;
    transition: background-color 1s;
}

label {
    display: inline-block;
}

body section#menu > div.internas {
    display: flex;
    justify-content: center;
}

body section#menu > div.internas > ul {
    display: flex;
align-items: flex-start;
}

body section#menu > div.internas > ul > li > * {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    border: 1px solid #CCC;
}

body section#menu > div.internas > ul > li > label {
    cursor: pointer;
    height: 50px;
}

body section#menu > div.internas > ul > li > ul > li > a : hover {
    background: #999;
}

body section#menu > div.internas > ul > li > ul > li > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}

body section#menu > div.internas > ul > li > ul {
    display: none;
    flex-direction: column;
}

body section#menu > div.internas > ul > li > a:hover {
    background: #999;
    color: #fff;
}
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<section id="menu">

<div class="internas">

    <ul id="menuX">

        <li>
            <label>Cadastrar</label>
            <ul id="menuCadastrar">
                <li><a href="/admin/cadastrar/administradores">Administradores</a></li>
                <li><a href="/admin/cadastrar/cursos">Cursos</a></li>
                <li><a href="/admin/cadastrar/fornecedores">Fornecedores</a></li>
                <li><a href="/admin/cadastrar/tecnicos">Técnicos</a></li>
                <li><a href="/admin/cadastrar/youtubers">Youtubers</a></li>
            </ul>
        </li>

        <li>
            <label>Editar</label>
            <ul id="menuEditar">
                <li><a href="/admin/editar/administradores">Administradores</a></li>
                <li><a href="/admin/editar/cursos">Cursos</a></li>
                <li><a href="/admin/editar/fornecedores">Fornecedores</a></li>
                <li><a href="/admin/editar/tecnicos">Técnicos</a></li>
                <li><a href="/admin/editar/youtubers">Youtubers</a></li>
            </ul>
        </li>

    </ul>

</div>

0
0

Com a ajuda do colega Hugo, consegui fazer a minha própria solução de forma que eu consiga entender.

Mas pela ajuda dele, aceitei a sua reposta como satisfatória.

No entanto, quero deixar minha colaboração!

* {
    font-family: 'Montserrat';
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}
body {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: border-box; /*Comprimir(diminuir) as medidas do elemento para não aumentá-lo quando adicinar margin e padding*/
}
body > section {
	display: flex;
	justify-content: center;
	width: 100vw;
}
body > section > div {
	display: flex;
	width: 1200px;
	padding: 10px;
}
ul {
    list-style: none;
}
a {
	text-decoration: none;
    transition: background-color 1s;
}
label {
	display: inline-block;
}
body section#menu > div.internas {
    display: flex;
    justify-content: center;
	padding-bottom: 300px;
}
body section#menu > div.internas > ul {
    display: flex;
}
body section#menu > div.internas > ul > li > label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 50px;
	cursor: pointer;
	border: 1px solid #CCC;
	
}
body section#menu > div.internas > ul > li > label:hover {
	background: #CCC;
}
body section#menu > div.internas > ul > li > ul  {
    display: none;
	flex-direction: column;
}
body section#menu > div.internas > ul > li:hover ul {
	position: absolute;
    display: flex;
	z-index: 100;
}
body section#menu > div.internas > ul > li > ul > li > a  {
	display: flex;
	align-items: center;
	width: 200px;
	height: 50px;
	border: 1px solid #CCC;
	padding-left: 5px;
}
body section#menu > div.internas > ul > li > ul > li > a:hover  {
	background: #CCC;
	color: #fff;
}
<section id="menu">
	
	<div class="internas">
		
		<ul>
		
			<li>
				<label>Cadastrar</label>
				<ul>
					<li><a href="/admin/cadastrar/administradores">Administradores</a></li>
					<li><a href="/admin/cadastrar/cursos">Cursos</a></li>
					<li><a href="/admin/cadastrar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/cadastrar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/cadastrar/youtubers">Youtubers</a></li>
				</ul>
		    </li>
		
			<li>
				<label>Editar</label>
				<ul>
					<li><a href="/admin/editar/administradores">Administradores</a></li>
					<li><a href="/admin/editar/cursos">Cursos</a></li>
					<li><a href="/admin/editar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/editar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/editar/youtubers">Youtubers</a></li>
				</ul>
			</li>
			
		</ul>
		
	</div>
	
</section>

Obrigado!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .