Ir para conteúdo
Fórum Script Brasil

joao22666

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    6

  • Registro em

  • Última visita

 Tipo de Conteúdo 

Posts postados por joao22666

  5. Ajuda com Menu em CSS

    em HTML, XHTML, CSS

    Postado

    Olá, também sou novo em programação html+css, mais consegui resolver o seu problema, fiz algumas mudanças como por exemplo criei um estilo a parte e não dentro do Html. Dei o nome de teste06.css como você pode ver antes do fechamento do </head>.

    Segue código html e css abaixo, qualquer dúvida é só entrar em contato.

    Abraço.

    Código HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="teste6.css" />
    </head>
    <body>
    <div id="menu1">
    <nav role="navigation">
    <ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
    <li><a href="#">Empresa</a>
    <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
    <li><a href="C:\Users\Home\Documents\Site Daynes\2 Empresa\Sobre_Nos_V2.html">Sobre Nós</a></li>
    <li><a href="C:\Users\Home\Documents\Site Daynes\2 Empresa\Noticias_V2.html">Notícias</a></li>
    </ul>
    <li><a href="#">Serviços</a>
    <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
    <li><a href="C:\Users\Home\Documents\Site Daynes\3 Serviço\Servico_Bambu_V2.html">Bambu</a></li>
    <li><a href="C:\Users\Home\Documents\Site Daynes\3 Serviço\Servico_Fotos_V2.html">Fotos</a></li>
    </ul>
    </li>
    <li><a href="C:\Users\Home\Documents\Site Daynes\4 Guia\Guia_Resultado_V2.html">Guia</a></li>
    <li><a href="C:\Users\Home\Documents\Site Daynes\5 Contato\Contato_V2.html">Contato</a></li>
    </li>
    </ul>
    </nav>
    </div>
    </body>
    </html>
    Código CSS:
    @charset "utf-8";
    /* CSS Document */
    /*Configurações Padrões*/
    #menu1{
    width:960px;
    height:150px;
    margin:0 auto;
    text-align:center;
    }
    nav{
    width:400px;
    margin:0 auto;
    }
    ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none;}
    ul.menu ul{ position:absolute; display:none; box-shadow:3px 3px 2px #333;}
    /* Configurações nivel 1*/
    ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; border-radius:5px; padding:0 5px;}
    .menu li{ float:left; width:auto; position:relative;}
    .menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; transition:all 0.1s linear; }
    /* Configurações nivel 2*/
    .menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:5px; width:200px; border-radius:0 0 5px 5px; }
    .menu ul.submenu-1 a{ width:160px; padding:0 20px; border-radius:5px; }
    /* Configurações nivel 2*/
    .menu li:hover > ul.submenu-2{ display:block; top:0; left:195px; padding:5px; width:200px; border-radius: 0 5px 5px 5px; }
    .menu ul.submenu-2 a{ width:160px; padding:0 20px; border-radius:5px; }
    /* Configurações nivel 3*/
    .menu li:hover > ul.submenu-3{ display:block; top:0; left:195px; padding:5px; width:200px; border-radius: 0 5px 5px 5px; }
    .menu ul.submenu-3 a{ width:160px; padding:0 20px; border-radius:5px; }
    /*Configurações de cores*/
    /*nivel 1*/
    .menu{background:#FF0; }
    .menu a{ color:#000;}
    .menu li:hover > a{ background:#999; color:#fff;}
    /*nivel 2*/
    .submenu-1{ background:#FFFF99;}
    .submenu-1 a{color:#000;}
    .submenu-1 li:hover > a{ background:#666; }
×
×
  • Criar Novo...