Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

By M a r l o n

menu drop down

Por , em Javascript

Recommended Posts

By M a r l o n    0

By M a r l o n
Postado

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...

 

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 !

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

By M a r l o n    0

By M a r l o n
Postado

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">
    <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;}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito