Ir para conteúdo

POWERED BY:

Arquivado

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

jhonatanpacheco

Menu e submenu fixo fica por cima do conteúdo do resto da pagina

Recommended Posts

Ola pessoal, gostaria de uma ajuda, tudo que eu colo abaixo do menu e submenu, quando o submenu e aberto ele acaba cobrindo o conteudo de baixo tambem, gostaria de uma ajuda de como eu poderia fazer para quando o submenu foi abrir, o conteudo da pagina abaixo descesse junto com ele, nao ficar por cima de outro conteudo, agradeço.

 

aqui esta codigo html:

<nav id='cssmenu'>
    <div id="head-mobile"></div>
    <div class="button"></div>

    <ul>
    <li><a href='#'>Anne with an E</a>
       <ul>
          <li><a href='#'>Temporada 1</a>
             <ul>
                <li><a href='#'>1-1</a></li>
                <li><a href='#'>1-2</a></li>
                <li><a href='#'>1-3</a></li>
                <li><a href='#'>1-4</a></li>
                <li><a href='#'>1-5</a></li>
                <li><a href='#'>1-6</a></li>
                <li><a href='#'>1-7</a></li>
                <li><a href='#'>1-8</a></li>
                <li><a href='#'>1-9</a></li>
                <li><a href='#'>1-10</a></li>
                <li><a href='#'>1-11</a></li>
                <li><a href='#'>1-12</a></li>
                <li><a href='#'>1-13</a></li>
                <li><a href='#'>1-14</a></li>
                <li><a href='#'>1-15</a></li>
                <li><a href='#'>1-16</a></li>
                <li><a href='#'>1-17</a></li>
                <li><a href='#'>1-18</a></li>
                <li><a href='#'>1-19</a></li>
                <li><a href='#'>1-20</a></li>
                <li><a href='#'>1-21</a></li>
                <li><a href='#'>1-22</a></li>
             </ul>
          </li>
          <li><a href='#'>Temporada 2</a>
             <ul>
               <li><a href='#'>2-1</a></li>
               <li><a href='#'>2-2</a></li>
               <li><a href='#'>2-3</a></li>
               <li><a href='#'>2-4</a></li>
               <li><a href='#'>2-5</a></li>
               <li><a href='#'>2-6</a></li>
               <li><a href='#'>2-7</a></li>
               <li><a href='#'>2-8</a></li>
               <li><a href='#'>2-9</a></li>
               <li><a href='#'>2-10</a></li>
               <li><a href='#'>2-11</a></li>
               <li><a href='#'>2-12</a></li>
               <li><a href='#'>2-13</a></li>
               <li><a href='#'>2-14</a></li>
               <li><a href='#'>2-15</a></li>
               <li><a href='#'>2-16</a></li>
               <li><a href='#'>2-17</a></li>
               <li><a href='#'>2-18</a></li>
               <li><a href='#'>2-19</a></li>
               <li><a href='#'>2-20</a></li>
               <li><a href='#'>2-21</a></li>
               <li><a href='#'>2-22</a></li>
             </ul>
          </li>
       </ul>
    </li>
    </ul>
    </nav>
    </header>

    </div>

 

CSS:

header {position:relative;width:100%;background:black; border-radius: 0;}
#cssmenu{position:absolute;float: none;width:180px;margin: -2% auto;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile
{position:absolute;float: none;border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;background:#black;}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#EE9A00;}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover
{!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before
{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:38px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a
{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#EE9A00;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}

Compartilhar este post


Link para o post
Compartilhar em outros sites

você não postou o css, mas nesse caso, se você não utilizar nenhum tipo de float nem position: absolute, o conteúdo irá sim empurrar.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 26/07/2018 at 18:43, jhonatanpacheco disse:

#cssmenu{position:absolute;float: none;width:180px;margin: -2% auto;}

 

#cssmenu{position:absolute; -> Mude para relative

float: none; -> Isso é inútil, pois e elemento pai não é flutuante

 

Aqui você fez um confusão danada eim... Reinscreveu propriedades; definiu propriedades que mais á frente serão reinscritas

Em 26/07/2018 at 18:43, jhonatanpacheco disse:

#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile
{position:absolute;float: none;border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

De qualquer forma #cssmenu ul#cssmenu ul li não devem também ser absolutas.

 

Me desculpe, mas reveja seu css porque tá meio zuado eim.....

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
×

Informação importante

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