GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

[Resolvido]DropDown CSS

front-end
html
css
html5
Tags: #<Tag:0x00007fc4c75e33a8> #<Tag:0x00007fc4c75e31f0> #<Tag:0x00007fc4c75e3088> #<Tag:0x00007fc4c75e2f48>

#1

Estou desenvolvendo uma aplicação web e gostaria que quando eu passar o mousa por cima do marca <p class="ordena" id="marca"><span class="caret"></span> Marca</p> ele mostrasse o conteudo dentro da div <div class="dropdown-content-Marcas"></div> mas não estou conseguindo;.

HTML

            <div class="conteudo_ordenar">
                <h3 class="titulo_ordenar">Ordenar Pesquisa</h3>
            <p class="ordena" id="marca"><span class="caret"></span> Marca</p>
            <p class="ordena"><span class="caret"></span> Tamanho</p>
            <p class="ordena"><span class="caret"></span> Cor</p>
            <p class="ordena"><span class="caret"></span> Faixa De Preço</p>
        </div>
            
             <div class="dropdown-content-Marcas">

                    <li><a href="#"><input id="checkBox" type="checkbox"> Adidas</a></li>
                    <li><a href="#"><input id="checkBox" type="checkbox"> Nike</a></li>
                    <li><a href="#"><input id="checkBox" type="checkbox"> Lacoste</a></li>

                </div>
            
            
            
        </div>

CSS

.dropdown-content-Marcas{

display: none;
}

 #marca:hover .dropdown-content-Marcas{
display: block;

 }

#2

HTML

<div class="conteudo_ordenar" >
   <h3 class="titulo_ordenar">Ordenar Pesquisa</h3>
   <div id="marca">
           <p class="ordena"><span class="caret"  ></span> Marca</p>
	<div class="dropdown-content-Marcas">
		<li><a href="#"><input id="checkBox" type="checkbox"> Adidas</a></li>
		<li><a href="#"><input id="checkBox" type="checkbox"> Nike</a></li>
		<li><a href="#"><input id="checkBox" type="checkbox"> Lacoste</a></li>
	</div>
   </div>
   <p class="ordena"><span class="caret"></span> Tamanho</p>
       <p class="ordena"><span class="caret"></span> Cor</p>
   <p class="ordena"><span class="caret"></span> Faixa De Preço</p>
</div>

Parceiro descobri que ele tem que ser colocado dentro da mesma DIV por questão de orientação do css ou seja uma DIV (id=‘marca’) maior como recipiente e a outra DIV (class=‘dropdown-content-Marcas’) o conteúdo. Não posso colocar no paragrafo a id=“marca” pois assim o CSS não se orienta.

CSS

.dropdown-content-Marcas {
	display: none;
}
		
#marca:hover .dropdown-content-Marcas {
	display: block;
}

Peço desculpa se caso não tiver conseguido explicar direito, não tenho muitas habilidades no CSS, tenho mais facilidade com JAVASCRIPT.


#3

era isso mesmo obrigado funcionou