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

[jhonatanpacheco 0]

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:''}

[jhonatanpacheco 0]

niinguem para me ajudar 

 

[William Bruno 1501]

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.

[Adriano Rabello 0]

da uma olhada em https://getbootstrap.com/docs/4.1/components/navs/

 

O framework mais utilizado do mundo

[jhonatanpacheco 0]

postei o css, oque poderia fazer?

[Omar~ 87]

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 e #cssmenu ul li não devem também ser absolutas.

 

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