Série da semana: Primeiros passos no React

Veja mais

Erro no meu submenu

11/02/2016

1

Ao passar o mouse no menu que abre o submenu aparecem os links ou li mas quando eu tento passar sobre eles ai some esse submenu.
Isso aconteceu quando coloquei um efeito jquery de galeria de imagens na minha página vou colocar os dois códigos aqui do jquery e do css:

css:
.menu
{
list-style:none;
border:1px solid #c0c0c0;
float:left;
margin-left: 300px;
margin-top: -50px;
}
.menu li{
position:relative;
float:left;
border-right:1px solid #c0c0c0;
width: 150px;
text-align: center;
}
.menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}

.menu li a:hover
{
background:#333;
color:#fff;
-moz-box-shadow:0 3px 10px 0 #CCC;
-webkit-box-shadow:0 3px 10px 0 #ccc;
text-shadow:0px 0px 5px #fff;
}
.menu li ul
{
position:absolute;
top:25px;
left:0;
background-color:#836FFF;
display:none;
}
.menu li:hover ul, .menu li.over ul
{
display:block;

}

.menu li ul li{
border:1px solid #c0c0c0;
display:block;
width:150px;
}

Jquery:
<script type="text/javascript">
$(document).ready(function(){

var largura , altura , tamanho ,distancia;
largura = $(window).width();
altura = $(window).height();
$('#galeria').css({height:altura-33+'px'});
tamanho = $('.mini').width();
distancia = tamanho - largura;
$('.mini').mousemove(function(mouse){
if(mouse.pageX < distancia + 20){
$(this).css({left:-mouse.pageX});
}
});

$('.mini img').click(function(){
var img = $(this).attr('src');
$('.ampliada img').attr('src',img);
});
});
</script>



e o css do efeito galeria:(que acho que é onde que está o problema)


<style type="text/css">
body
{
width: 2500px;
overflow: hidden;
}
#galeria
{
width: 100%;
position: relative;
}
.ampliada
{
width: inherit;
height: inherit;
position: fixed;
}
.ampliada img
{
width: 500px;
height: 500px;
margin-top: 130px;
margin-left: 400px;
}
.mini
{
position: absolute;
bottom: 25px;
left: 0px;
background: rgba(0,0,0,0.5);
padding: 10px;
}
.mini img
{
height: 140px;
width: 140px;
margin: 0 20px;
float: left;
cursor: pointer;
}
</style>


e por fim as divs:


<div id="galeria">
<div class="ampliada">
<img src="sucos/abacaxi.png">
</div>
<div class="mini">
<img src="sucos/laranja.png">
<img src="refrigerantes/cocacola.png">
<img src="refrigerantes/kuat.png">
<img src="ImagensHome/jarra.png">
<img src="ImagensHome/refrigerantes.png">
<img src="ImagensHome/sorvete.png">
<img src="sucos/caju.png">
<img src="sucos/horchata.png">
<img src="sucos/morango.png">
<img src="refrigerantes/cocazero.png">
<img src="refrigerantes/fantalaranja.png">
<img src="refrigerantes/itubaina.png">
</div>
</div>
Responder