Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom,
criei um menu drop em css, estilizei belezinha, e usei jquery pra dar um efeito mais legal, mas tem uma coisa que ta me incomodando na imagem abaixo voces vão ver o menu1 e o menu 2...
/applications/core/interface/imageproxy/imageproxy.php?img=http://img27.imageshack.us/img27/1862/38523907.jpg&key=300ddbb70ba6e05a9a95d99c2f026fadba4f0db2782098ad2b0387f7ae10ebaf" alt="Imagem Postada" />
como podem ver no menu1 quando eu passo em cima por exemplo do link ministerios ele da o hover normal, so que quando eu vo pro sub menu o hover dele saii, só que eu quero que continue enquanto eu estiver no sub menu do mesmo intendem? quero q fique como na imgem menu2!
se puderem ajudar obrigado !
Bom, ta ai os codigos
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="css/estilo.css" />
<link href="css/menuie6.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="js/jquery.js">
</script>
<script>
function mainmenu(){
$(" #nav ul ").css({
display: "none"
});
$(" #nav li").hover(function(){
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(200);
}, function(){
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function(){
mainmenu();
});
</script>
</head>
<body>
<div id="conteudo">
<div id="topo">
<div id="logo">
<img src="imagens/tp_01.png" width="276" height="178" />
</div>
<div id="bilbiaon">
</div>
<div id="menu">
<ul id="nav">
<li>
<a href="#">CAPA INICIAL</a>
</li>
<li>
<a href="#">INSTITUCIONAL</a>
</li>
<li>
<a href="#">MINISTÉRIOS</a>
<ul>
<li>
<a href="#">LOUVOR</a>
<li>
<a href="#">KORUS AINON</a>
<li>
<a href="#">JUVENTUDE</a>
<li>
<a href="#">3ª IDADE</a>
<li>
<a href="#">JEFTE</a>
<li>
<a href="#">SAF</a>
</li>
</ul>
</li>
<li>
<a href="#">ENTRETENIMENTO</a>
</li>
<li>
<a href="#">AGENDA</a>
</li>
</ul>
</div>
<div id="slideshow">
<img src="imagens/slideshow/1.jpg" width="741" height="236" />
</div>
<div id="content">
</div>
</div>
</div>
</body>
</html>estilo.css
#nav, #nav ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;line-height:2.2em;}
#nav a{display:block;padding:0px 10px;color:#48c1ff;text-decoration:none;}
#nav a:hover{background-color:#48c1ff;color: #333;}
#nav li{float:left;position:relative; border:0px ; }
#nav ul {position:absolute;display:none;width:12em;top:2.4em;font-size:10px;}
#nav li ul a{width:15em;height:auto;float:left;background-color:#48c1ff; color:#FFF;display:block; font-size:12px;}
#nav li ul a:hover{ background:#FFF; color:#48c1ff;display:block;}
#nav ul ul{top:auto; background-color:#CCCCCC;}
#nav li ul ul {left:15em; margin-left:50px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block;}
Tópico movido:
Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript / DHTML
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Talvez seja problema com a jQuery, mude o hover para mouseout e mouseover e veja se funciona...
Ai você tera que usar jQuery.. pois você quer estilizar a tag A, que eh irma do UL do submenu.
Poste um link para o teu site, ou o codigo.. nao eh dificil.. mas so com css, nao vai ser possivel.