Como abrir um menu quando passar o mouse e navegar nesse menu
Oi pessoal, estou fazendo um site para um projeto da facul, e estou com uma dúvida de como fazer quando eu passar o mouse no menu e abrir outro menu e nisso eu poder navegar nele, eu consegui fazer a parte de quando eu passo o mouse no menu e aparece outro menu, só que não estou conseguindo navegar nele ele sai toda hora quando tento passar o mouse no "submenu", ele some, ja tentei colocar o onmouseout,onclick..... mas não estou conseguindo
segue abaixo meu codigo html e css
Home.html
<!DOCTYPE html>
<html>
<head>
<title>Copa do Mundo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo/homecopa.css">
<link rel="stylesheet" type="text/css" href="estilo/estadios.css">
<script language="JavaScript">
function mostrarElemento(id, visibilidade) {
document.getElementById(id).style.display = visibilidade;
}
function mostrarEstadio(id, visibilidade) {
document.getElementById(id).style.display = visibilidade;
}
</script>
</head>
<body>
<div id="site">
<div id="menu">
<nav id="estilomenu">
<ul type="disc">
<li><a href="home.html">Home</a></li>
<li><a href="selecoes.html" onMouseOver="mostrarElemento('prodImagem', 'inline');"
onMouseOut="mostrarElemento('prodImagem','none');" >Seleções</a>
<div id="prodImagem">
<a href="http://google.com.br"><input type="image" id="portugal" src="http://4.bp.blogspot.com/-t73I2Iqtfws/Vnl5SwT4L0I/AAAAAAAACHI/wQBSlPhr4xo/s1600/Portugal.png"/>
<a href="http://google.com.br"><input type="image" id="brasil" src="_imagens/selecoes/brasil.png">
<a href="http://google.com.br"><img id="russia" src="_imagens/selecoes/russia.png"></a>
<a href="http://google.com.br"><input type="image" id="alemanha" src="_imagens/selecoes/alemanha.png">
<a href="http://google.com.br"><input type="image" id="franca" src="_imagens/selecoes/franca.png">
<a href="http://google.com.br"><input type="image" id="espanha" src="_imagens/selecoes/espanha.png">
<a href="http://google.com.br"><input type="image" id="croacia" src="_imagens/selecoes/croacia.png">
<a href="http://google.com.br"><input type="image" id="argentina" src="_imagens/selecoes/argentina.png">
<a href="http://google.com.br"><input type="image" id="belgica" src="_imagens/selecoes/belgica.png">
<a href="http://google.com.br"><input type="image" id="polonia" src="_imagens/selecoes/polonia.png">
<a href="http://google.com.br"><input type="image" id="suica" src="_imagens/selecoes/suica.png">
<a href="http://google.com.br"><input type="image" id="inglaterra" src="_imagens/selecoes/inglaterra.png">
<a href="http://google.com.br"><input type="image" id="colombia" src="_imagens/selecoes/colombia.png">
<a href="http://google.com.br"><input type="image" id="mexico" src="_imagens/selecoes/mexico.png">
<a href="http://google.com.br"><input type="image" id="uruguai" src="_imagens/selecoes/uruguai.png">
<a href="http://google.com.br"><input type="image" id="peru" src="_imagens/selecoes/peru.png">
<a href="http://google.com.br"><input type="image" id="costarica" src="_imagens/selecoes/coastarica.png">
<a href="http://google.com.br"><input type="image" id="suecia" src="_imagens/selecoes/suecia.png">
<a href="http://google.com.br"><input type="image" id="tunisia" src="_imagens/selecoes/tunisia.png">
<a href="http://google.com.br"><input type="image" id="egito" src="_imagens/selecoes/egito.png">
<a href="http://google.com.br"><input type="image" id="senegal" src="_imagens/selecoes/senegal.png">
<a href="http://google.com.br"><input type="image" id="ira" src="_imagens/selecoes/ira.png">
<a href="http://google.com.br"><input type="image"id="dinamarca" src="_imagens/selecoes/dinamarca.png">
<a href="http://google.com.br"><input type="image" id="islandia" src="_imagens/selecoes/islandia.png">
<a href="http://google.com.br"><input type="image" id="servia" src="_imagens/selecoes/servia.png">
<a href="http://google.com.br"><input type="image" id="nigeria" src="_imagens/selecoes/nigeria.png">
<a href="http://google.com.br"><input type="image" id="japao" src="_imagens/selecoes/japao.png">
<a href="http://google.com.br"><input type="image" id="marrocos" src="_imagens/selecoes/marrocos.png">
<a href="http://google.com.br"><input type="image" id="panama" src="_imagens/selecoes/panama.png">
<a href="http://google.com.br"><input type="image" id="coreiadosul" src="_imagens/selecoes/coreiadosul.png">
<a href="http://google.com.br"><input type="image"id="arabiasaudita" src="_imagens/selecoes/arabiasaudita.png">
<a href="http://google.com.br"><input type="image" id="australia" src="_imagens/selecoes/australia.png">
</div></li>
<li><a href="grupos.html">Grupos</a></li>
<li><a href="sobre.html">Sobre a Rússia</a></li>
<li><a <a href="estadios.html" onMouseOver="mostrarEstadio('prodEstadio', 'inline');"
onMouseclick="mostrarEstadio('prodEstadio', 'inline');" onMouseOut="mostrarEstadio('prodEstadio');" >Estádios</a>
<div id="prodEstadio">
<a href="http://google.com.br"><input type="image" id="kazam" src="_imagens/estadios/kazam.png"></a>
</div></li>
</ul>
</nav>
</div>
<div id="fundo">
<div id="wallpaper">
<img src="_imagens/russia.jpg" >
</div>
</div>
</div>
</body>
</html>
*******************homecopa.css*************
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Acme');
body{
}
a{
color:white;
text-decoration: none;
}
#site{
width: 1366px;
height: 660px;
background-image: url("../_imagens/background.jpg");
background-size: 100%;
position: absolute;
top: 0;
left: 0;
}
#menu{
width: 700px;
height: 70px;
background-color:#0047AB;
position: relative;
margin-top: -18px;
margin-left:120px;
border-radius: 5px;
}
#wallpaper{
width: 1120px;
height:593px;
background-color:none;
position:relative;
margin-left:120px;
}
#wallpaper img{
width:1120px;
height:593px;
opacity: none;
z-index: 1;
}
/*Personalização menu*/
#menu{
padding-left: 420px;
}
nav#menu{
display: block;
border-radius: 10px;
}
nav#estilomenu ul{
list-style: none;
text-transform: uppercase;
font-family: 'Acme', sans-serif;
margin-left: -200px;
}
nav#estilomenu li{
display: inline-block;
background-color: none;
padding: 14px;
margin: 8px;
color: white;
}
nav#estilomenu li:hover{
background-color: #6495ED;
transition: background-color 1s;
}
/* Javascript*/
#prodImagem {
width: 350px;
height: 220px;
background-color: white;
cursor: pointer;
opacity: 0.8;
display: none;
position: absolute;
padding: 5px;
z-index: 2;
border-radius: 30px;
}
#prodImagem input#portugal{
width: 40px;
outline: none;
}
#prodImagem input#brasil{
width: 40px;
outline: none;
}
#prodImagem img#russia{
width: 40px;
outline: none;
}
#prodImagem input#alemanha{
width: 40px;
outline: none;
}
#prodImagem input#franca{
width: 40px;
outline: none;
}
#prodImagem input#espanha{
width: 30px;
padding-left: 2px;
outline: none;
}
#prodImagem input#croacia{
width: 30px;
padding-left: 12px;
outline: none;
}
#prodImagem input#argentina{
width: 40px;
padding-left: 11px;
outline: none;
}
#prodImagem input#belgica{
width: 40px;
outline: none;
}
#prodImagem input#polonia{
width: 25px;
outline: none;
}
#prodImagem input#suica{
width: 30px;
padding-top: 10px;
padding-left: 10px;
outline: none;
}
#prodImagem input#inglaterra{
width: 40px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#colombia{
width: 30px;
padding-left: 5px;
padding-bottom: 5px;
outline: none;
}
#prodImagem input#mexico{
width: 30px;
padding-left: 5px;
outline: none;
}
#prodImagem input#uruguai{
width: 40px;
padding-left: 10px;
outline: none;
}
#prodImagem input#peru{
width: 30px;
padding-top: 15px;
padding-left: 15px;
outline: none;
}
#prodImagem input#costarica{
width: 40px;
padding-left: 5px;
outline: none;
}
#prodImagem input#suecia{
width: 40px;
outline: none;
}
#prodImagem input#tunisia{
width: 30px;
padding-left;
outline: none;
}
#prodImagem input#egito{
width: 30px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#senegal{
width: 30px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#ira{
width: 20px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#dinamarca{
width: 30px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#islandia{
width: 30px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#servia{
width: 30px;
padding-left: 10px;
outline: none;
}
#prodImagem input#nigeria{
width: 30px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#japao{
width: 30px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#marrocos{
width: 30px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#panama{
width: 30px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#coreiadosul{
width: 30px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#arabiasaudita{
width: 30px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodImagem input#australia{
width: 40px;
padding-left: 10px;
padding-top: 10px;
outline: none;
}
#prodEstadio {
width: 350px;
height: 220px;
background-color: white;
opacity: 0.8;
display: none;
position: absolute;
padding: 5px;
z-index: 1;
border-radius: 30px;
border-color: black;
}
/* Estadios*/
#prodEstadio input#kazam{
width: 100px;
}
NÃO SEI SE DA PRA VCS TEREM UMA IDEIA DE COMO TA, MAS TIREI PRINT PARA VCS VERE
OBRIGADO!
AGUARDO RESPOSTAS
Discussão (2)
Carregando comentários...