Passar mouse no menu e exibir submenus - Trabalho escolar.

[angela_melloo 0]

Estou com problema em fazer os sub-menus aparecerem quando o mouse passar em cima do menu!

 

---HTML----

		<ul class="menu-itens">
                    <li>
                        <a href="#" title="Gizmodo - Especiais" data-menu-hover="1">Especiais</a>
                    </li>
                    <li>
                        <a href="#" title="Gizmodo - Galerias" data-menu-hover="2">GALERIAS</a>
                    </li>
                    <li>
                        <a href="#" title="Gizmodo - Reviews" data-menu-hover="3">Reviews</a>
                    </li>
                    <li>
                        <a href="#" title="Gizmodo - Hands-on" data-menu-hover="4">Hands-on</a>
                    </li>
                    <li>
                        <a href="#" title="Gizmodo - Games" data-menu-hover="5">Games</a>
                    </li>

 		</ul>
		<div id="menu-hover-1" class="menu-hover no-menu">
                        <div class="arrow-top"></div>            
                        <div class="submenu-chamada">
                            <a class="thumb" href="#">
                                <img src="http://gizmodo.uol.com.br/wp-content/blogs.dir/8/files/2017/05/teclado-1-540x305.jpg">
                            </a>
                            <h3>
                                <a href="#">Loucos por teclas: dentro do maravilhoso mundo dos fanáticos por teclados</a>
                            </h3>
                        </div>
                        <div class="submenu-chamada">
                            <a class="thumb" href="#">
                                <img src="http://gizmodo.uol.com.br/wp-content/blogs.dir/8/files/2017/05/hacker-ransomware-540x305.jpg">
                            </a>
                            <h3>
                                <a href="#">[Giz Explica] O que é o ransomware e como se proteger dele</a>
                            </h3>
                        </div>
                        <div class="submenu-chamada">
                            <a class="thumb" href="#">
                                <img src="http://gizmodo.uol.com.br/wp-content/blogs.dir/8/files/2017/04/joao-doria-prefeito-540x305.jpg">
                            </a>
                            <h3>
                                <a href="#">Os políticos estão abusando nos pedidos de identificação de usuários de redes sociais</a>
                            </h3>
                        </div>
                        <div class="submenu-chamada">
                            <a class="thumb" href="#">
                                <img src="http://gizmodo.uol.com.br/wp-content/blogs.dir/8/files/2017/03/humanos-marte-540x305.jpg">
                            </a>
                            <h3>
                                <a href="#">Os humanos precisarão modificar seus corpos para sobreviver em Marte?</a>
                            </h3>
                        </div>
                        <div class="veja-todas">
                            <a href="#" title=""> VEJA TODAS</a>
                        </div>
		</div>

---CSS----

#menu-hover-1{
    top: 137px;
    left: 0px; 
    display:block;
}
.menu-hover.no-menu {
    width: 92%;
    padding: 30px 4%;
}
.menu-hover {
    color: #FFF;
    background: #064360;
    border-bottom: 2px solid #FFF;
    box-shadow: 0 5px 20px rgba(0,0,0,.5);
}
.menu-hover {
    display:none;
    position: fixed;
    height: 240px;
    z-index: 21000;
    margin: 0 auto;
}
.arrow-top {
    left: 602.688px;
}
.menu-hover .arrow-top {
    position: absolute;
    top: -10px;
    width: 125px;
    height: 10px;
    overflow: hidden;
    background: url(seta-submenu.png) left bottom no-repeat;
    cursor: pointer;
}
.menu-hover.no-menu .submenu-chamada {
    width: 20%;
}
.menu-hover .submenu-chamada {
    float: left;
    width: 26%;
    margin-right: 5%;
    margin-bottom: 35px;
    line-height: 14px;
}
.menu-hover .submenu-chamada .thumb {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 0 0 3px #000;
    max-height: 134px;
    overflow: hidden;
}
.menu-hover .submenu-chamada h3 {
    text-align: center;
}
.menu-hover .submenu-chamada h3 a, .menu-hover.no-menu .submenu-chamada h3 a {
    font-size: 13px;
    color: #FFF!important;
    font-family: 'Roboto',serif;
    font-weight: 600;
}
.menu-hover .submenu-chamada h3 a {
    text-decoration: none;
}
.menu-hover.no-menu .submenu-chamada {
    width: 20%;
}
.menu-hover .submenu-chamada {
    float: left;
    width: 26%;
    margin-right: 5%;
    margin-bottom: 35px;
    line-height: 14px;
}
.menu-hover .submenu-chamada .thumb {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 0 0 3px #000;
    max-height: 134px;
    overflow: hidden;
}
.menu-hover .submenu-chamada .thumb img {
    display: block;
    width: 100%;
    height: auto;
}
.menu-hover .submenu-chamada h3 {
    text-align: center;
}
.menu-hover .submenu-chamada h3 a, .menu-hover.no-menu .submenu-chamada h3 a {
    font-size: 13px;
    color: #FFF!important;
    font-family: 'Roboto',serif;
    font-weight: 600;
}
.menu-hover .submenu-chamada h3 a {
    text-decoration: none;
}

 

 

 

O que estou errando, ou o que está faltando?  

(obs: é um trabalho escolar, clonar um site.)

 

[Matheus Tavares 167]

Desculpe, mas não entendi qual é o sub-menu. Joguei seu código no jsfiddle para visualizar melhor: https://jsfiddle.net/nh9vjuo3/1/

 

Seria a parte azul? Conforme passa o mouse nos links da lista, você quer mudar os artigos da parte azul?

Você pode usar JS ou alguma biblioteca nesse trabalho, ou seria apenas HTML/CSS? jQuery? Bootstrap?

 

Eu procuraria pelos termos "abas" / "tabs". Geralmente é exatamente o que você quer, mas a partir do evento do clique, e não do hover. Bastaria adaptar...

 

https://www.youtube.com/results?search_query=abas+css (tem muito material)

Esse tutorial é um bom ponto de partida: https://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/

Aqui também tem outro exemplo: https://www.cssscript.com/pure-css3-tab-effects/

[angela_melloo 0]

18 minutos atrás, Matheus Tavares disse:

Desculpe, mas não entendi qual é o sub-menu. Joguei seu código no jsfiddle para visualizar melhor: https://jsfiddle.net/nh9vjuo3/1/

 

Seria a parte azul? Conforme passa o mouse nos links da lista, você quer mudar os artigos da parte azul?

Você pode usar JS ou alguma biblioteca nesse trabalho, ou seria apenas HTML/CSS? jQuery? Bootstrap?

 

Eu procuraria pelos termos "abas" / "tabs". Geralmente é exatamente o que você quer, mas a partir do evento do clique, e não do hover. Bastaria adaptar...

 

https://www.youtube.com/results?search_query=abas+css (tem muito material)

Esse tutorial é um bom ponto de partida: https://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/

Aqui também tem outro exemplo: https://www.cssscript.com/pure-css3-tab-effects/

Sim, essa parte azul. usei o display:none; e no :hover display: block; e não dá certo.

[Omar~ 87]

Também não entendi o que é o que para exibir mediante evento hover:

Se for .menu-itens

ul.menu-itens:hover > li {
  display: block
}

Ou seja quando o elemento UL que tenha a class menu-itens receber event hover vai fazer que seu conteúdo interno que contenha a tag LI receba a propriedade block.

 

Se for #menu-hover-1

#menu-hover-1:hover > .submenu-chamada {
    display: block
}

Ou seja quando elemento DIV que seja identificado por menu-hover-1 receber event hover vai fazer que seu conteúdo interno que seja DIV.submenu-chamada receba a propriedade block.

 

Não sei se compreende mas a sintaxe é simples:

Elemento pai é o elemento que possua algum conteúdo interno, e o filho é aquele que está dentro do elemento pai.

Assim sendo podemos manipular os filhos de acordo com os eventos do elemento pai ou seja tem que existir um vínculo entre eles para poder fazer essa manipulação.

<style>
   div {min-height: 200px}
   .elemento-pai {width: 500px; padding: 20px; background-color: red}
   .elemento-filho {width: 50%; margin: 1%; background-color: green}
   
   .elemento-pai:hover > .elemento-filho {background: blue}
</style>

<div class="elemento-pai">
    <div class="elemento-filho"></div>
    <div class="elemento-filho"></div>
</div>

 

Além disso é possível manipular elementos não vinculados, mas isso necessita de javascript como o Matheus já comentou.

 

Só mais uma coisa, antes de exibir por display: block é necessário que o elemento esteja oculto por display: none.

E o CSS apresentado contém talvez umas 100 linhas, elemento sendo repassado por elemento class sendo repassado por class. Dar para obter o mesmo resultado de layout com menos de 30 linhas, isso sem minimizar o css, porque do jeito que fez esta muito bagunçado, a maior parte do que foi feito nem precisava existir.