banner2

Home Foros Foro dudas Foro de CSS Menú desplegable vertical de 3 niveles

Menú desplegable vertical de 3 niveles

Viendo 2 publicaciones - del 1 al 2 (de un total de 2)
  • Autor
    Publicaciones
  • #10506

    Selma
    Participante

    Hola, estoy intentando hacer un menú vertical desplegable de 3 niveles pero no consigo que el tercer nivel los li se desplacen hacia abajo cuando quiero abrir el submenú, este es el código, alguien me puede ayudar? Gracias.

     
    <div style=»color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, ‘Courier New’, monospace; font-size: 14px; line-height: 19px; white-space: pre;»>
    <div><span style=»color: #808080;»><</span><span style=»color: #569cd6;»>html</span><span style=»color: #808080;»>></span></div>
    <div><span style=»color: #808080;»><</span><span style=»color: #569cd6;»>head</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>link</span> <span style=»color: #9cdcfe;»>href</span>=<span style=»color: #ce9178;»>»icofont/icofont.min.css»</span> <span style=»color: #9cdcfe;»>rel</span>=<span style=»color: #ce9178;»>»stylesheet»</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>meta</span> <span style=»color: #9cdcfe;»>http-equiv</span>=<span style=»color: #ce9178;»>»content-type»</span> <span style=»color: #9cdcfe;»>content</span>=<span style=»color: #ce9178;»>»text/html; charset=UTF-8″</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>style</span><span style=»color: #808080;»>></span></div>
    <div>        <span style=»color: #d7ba7d;»>body</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>color</span>: <span style=»color: #ce9178;»>white</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>fixed</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>top</span>: <span style=»color: #b5cea8;»>55px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>left</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #dcdcaa;»>calc</span>(<span style=»color: #b5cea8;»>100%</span> – <span style=»color: #b5cea8;»>55px</span>);</div>
    <div>            <span style=»color: #9cdcfe;»>width</span>: <span style=»color: #b5cea8;»>180px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>background</span>: <span style=»color: #dcdcaa;»>rgba</span>(<span style=»color: #b5cea8;»>0</span>, <span style=»color: #b5cea8;»>0</span>, <span style=»color: #b5cea8;»>0</span>, <span style=»color: #b5cea8;»>0.7</span>);</div>
    <div>            <span style=»color: #9cdcfe;»>overflow</span>: <span style=»color: #ce9178;»>hidden</span>;</div>
    <div>        }</div>
    <div>        <span style=»color: #6a9955;»>/*Nivel 1*/</span></div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span> <span style=»color: #d7ba7d;»>ul</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>list-style-type</span>: <span style=»color: #ce9178;»>none</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>margin</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>padding</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>cursor</span>: <span style=»color: #ce9178;»>pointer</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>margin-top</span>: <span style=»color: #b5cea8;»>20px</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>text-align</span>: <span style=»color: #ce9178;»>left</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>font</span>: <span style=»color: #b5cea8;»>13px</span> <span style=»color: #ce9178;»>»Roboto Condensed»</span>, <span style=»color: #ce9178;»>sans-serif</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>flex</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>align-items</span>: <span style=»color: #ce9178;»>center</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>line-height</span>: <span style=»color: #b5cea8;»>40px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #b5cea8;»>40px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>width</span>: <span style=»color: #b5cea8;»>100%</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>inline-block</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span>><span style=»color: #d7ba7d;»>i</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>line-height</span>: <span style=»color: #b5cea8;»>40px</span> <span style=»color: #569cd6;»>!important</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li.seleccionado</span>><span style=»color: #d7ba7d;»>a</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>background</span>: <span style=»color: #ce9178;»>#209E91</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span>><span style=»color: #d7ba7d;»>span</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>width</span>: <span style=»color: #b5cea8;»>137px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>inline-block</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>absolute</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>top</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>left</span>: <span style=»color: #b5cea8;»>45px</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span>><span style=»color: #d7ba7d;»>span</span>><span style=»color: #d7ba7d;»>i.flechita</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>absolute</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>top</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>right</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>margin-left</span>: <span style=»color: #b5cea8;»>10px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>margin-right</span>: <span style=»color: #b5cea8;»>10px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>line-height</span>: <span style=»color: #b5cea8;»>40px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>font-size</span>: <span style=»color: #b5cea8;»>15px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>transition</span>: <span style=»color: #b5cea8;»>0.8s</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>-moz-transition</span>: <span style=»color: #b5cea8;»>0.8s</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>-webkit-transition</span>: <span style=»color: #b5cea8;»>0.8s</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>-o-transition</span>: <span style=»color: #b5cea8;»>0.8s</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span>><span style=»color: #d7ba7d;»>i</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>margin-left</span>: <span style=»color: #b5cea8;»>15px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>margin-right</span>: <span style=»color: #b5cea8;»>15px</span>;</div>
    <div>        }</div>
    <div>        <span style=»color: #6a9955;»>/*Nivel 2*/</span></div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>none</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #b5cea8;»>30px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>border</span>: <span style=»color: #b5cea8;»>1px</span> <span style=»color: #ce9178;»>solid</span> <span style=»color: #ce9178;»>yellow</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li.seleccionado</span> <span style=»color: #d7ba7d;»>a</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>background</span>: <span style=»color: #ce9178;»>#209E91</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>padding-left</span>: <span style=»color: #b5cea8;»>45px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>width</span>: <span style=»color: #b5cea8;»>100%</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #b5cea8;»>100%</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>inline-block</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>flex</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>align-items</span>: <span style=»color: #ce9178;»>center</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a:hover</span>,</div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a:hover</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>color</span>: <span style=»color: #ce9178;»>#209E91</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li.seleccionado</span>><span style=»color: #d7ba7d;»>a:hover</span>,</div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li.seleccionado</span>><span style=»color: #d7ba7d;»>a:hover</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>color</span>: <span style=»color: #ce9178;»>white</span>;</div>
    <div>        }</div>
    <div>        <span style=»color: #6a9955;»>/*Nivel 3*/</span></div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>block</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #b5cea8;»>90px</span> <span style=»color: #569cd6;»>!important</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #b5cea8;»>30px</span>;</div>
    <div>        }</div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #808080;»>/</span><span style=»color: #569cd6;»>style</span><span style=»color: #808080;»>></span></div>
    <div><span style=»color: #808080;»></</span><span style=»color: #569cd6;»>head</span><span style=»color: #808080;»>></span></div>
    <div><span style=»color: #808080;»><</span><span style=»color: #569cd6;»>body</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>nav</span><span style=»color: #808080;»>></span></div>
    <div>        <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>            <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></span>Sección 1 <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>i</span> <span style=»color: #9cdcfe;»>class</span>=<span style=»color: #ce9178;»>»icofont-curved-down flechita»</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>i</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span></div>
    <div>                <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 1.1<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 1.2<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 1.3<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>            <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>            <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></span>Sección 2 <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>i</span> <span style=»color: #9cdcfe;»>class</span>=<span style=»color: #ce9178;»>»icofont-curved-down flechita»</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>i</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span></div>
    <div>                <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></span>Sección 2.1 <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>i</span> <span style=»color: #9cdcfe;»>class</span>=<span style=»color: #ce9178;»>»icofont-curved-down flechita»</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>i</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span></div>
    <div>                        <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>                            <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 2.1.1<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                            <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 2.1.2<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                            <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 2.1.3<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                        <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 2.2<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>            <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>        <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>nav</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>script</span> <span style=»color: #9cdcfe;»>src</span>=<span style=»color: #ce9178;»>»https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js»</span><span style=»color: #808080;»>></span><span style=»color: #808080;»><</span><span style=»color: #808080;»>/</span><span style=»color: #569cd6;»>script</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>script</span> <span style=»color: #9cdcfe;»>src</span>=<span style=»color: #ce9178;»>»https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js»</span> <span style=»color: #9cdcfe;»>integrity</span>=<span style=»color: #ce9178;»>»sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM»</span> <span style=»color: #9cdcfe;»>crossorigin</span>=<span style=»color: #ce9178;»>»anonymous»</span><span style=»color: #808080;»>></span><span style=»color: #808080;»><</span><span style=»color: #808080;»>/</span><span style=»color: #569cd6;»>script</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>script</span> <span style=»color: #9cdcfe;»>src</span>=<span style=»color: #ce9178;»>»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js»</span><span style=»color: #808080;»>></span><span style=»color: #808080;»><</span><span style=»color: #808080;»>/</span><span style=»color: #569cd6;»>script</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>script</span><span style=»color: #808080;»>></span></div>
    <div>        <span style=»color: #569cd6;»>var</span> <span style=»color: #9cdcfe;»>i</span> = <span style=»color: #b5cea8;»>0</span>;</div>
    <div>        <span style=»color: #569cd6;»>var</span> <span style=»color: #9cdcfe;»>rotation</span> = <span style=»color: #b5cea8;»>0</span>;</div>
    <div>        <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #9cdcfe;»>document</span>).<span style=»color: #dcdcaa;»>ready</span>(<span style=»color: #569cd6;»>function</span>() {</div>
    <div>            <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #ce9178;»>»nav ul li a»</span>).<span style=»color: #dcdcaa;»>click</span>(<span style=»color: #569cd6;»>function</span>() {</div>
    <div>                <span style=»color: #6a9955;»>//if ($(«nav>ul>li>a>span»).css(«display») === «none») {</span></div>
    <div>                <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #ce9178;»>»nav»</span>).<span style=»color: #dcdcaa;»>css</span>(<span style=»color: #ce9178;»>»width»</span>, <span style=»color: #ce9178;»>»180px»</span>);</div>
    <div>                <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #ce9178;»>»nav>ul>li>a>span»</span>).<span style=»color: #dcdcaa;»>css</span>(<span style=»color: #ce9178;»>»display»</span>, <span style=»color: #ce9178;»>»inline»</span>);</div>
    <div>                <span style=»color: #6a9955;»>//}</span></div>
    <div>                <span style=»color: #c586c0;»>if</span> (<span style=»color: #9cdcfe;»>i</span> % <span style=»color: #b5cea8;»>2</span> === <span style=»color: #b5cea8;»>0</span>) {</div>
    <div>                    <span style=»color: #9cdcfe;»>rotation</span> += <span style=»color: #b5cea8;»>180</span>;</div>
    <div>                    <span style=»color: #9cdcfe;»>i</span>++;</div>
    <div>                } <span style=»color: #c586c0;»>else</span> {</div>
    <div>                    <span style=»color: #9cdcfe;»>rotation</span> -= <span style=»color: #b5cea8;»>180</span>;</div>
    <div>                    <span style=»color: #9cdcfe;»>i</span>++;</div>
    <div>                }</div>
    <div>                <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #569cd6;»>this</span>).<span style=»color: #dcdcaa;»>parent</span>().<span style=»color: #dcdcaa;»>children</span>(<span style=»color: #ce9178;»>»ul»</span>).<span style=»color: #dcdcaa;»>slideToggle</span>();</div>
    <div>                <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #569cd6;»>this</span>).<span style=»color: #dcdcaa;»>children</span>(<span style=»color: #ce9178;»>»span»</span>).<span style=»color: #dcdcaa;»>children</span>(<span style=»color: #ce9178;»>»i»</span>).<span style=»color: #dcdcaa;»>css</span>(<span style=»color: #ce9178;»>»transform»</span>, <span style=»color: #ce9178;»>»rotate(«</span> + <span style=»color: #9cdcfe;»>rotation</span> + <span style=»color: #ce9178;»>»deg)»</span>);</div>
    <div>                <span style=»color: #9cdcfe;»>bandera</span> = <span style=»color: #569cd6;»>true</span>;</div>
    <div>            });</div>
    <div>        });</div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #808080;»>/</span><span style=»color: #569cd6;»>script</span><span style=»color: #808080;»>></span></div>
    <div><span style=»color: #808080;»></</span><span style=»color: #569cd6;»>body</span><span style=»color: #808080;»>></span></div>
    <div><span style=»color: #808080;»></</span><span style=»color: #569cd6;»>html</span><span style=»color: #808080;»>></span></div>
    </div>

    #10604

    Gaston Pappaterra
    Participante

    Hola selma, me gustaría ayudarte Pero me resulta muy complicado por la forma en la que se muestra el código. Te recomiendo que uses visual studio code ,que lo pongas con espacios,  desde ahí lo pases a codepen y luego publiques un enlace.

     

    Saludos

Viendo 2 publicaciones - del 1 al 2 (de un total de 2)
  • Debes estar registrado para responder a este debate.

Píldoras Informáticas

Comencé esta aventura para dar soporte a mis alumnos presenciales. Con el apoyo de todos los que me seguís mi canal de YouTube y esta web han crecido mucho más de lo que yo esperaba. Gracias a todos por estar ahí.

Quién está aquí ahora

Foto del perfil de Mateo Grisales González
Foto del perfil de Miraque
Foto del perfil de Sey
Foto del perfil de WitoSair
Foto del perfil de Jose Luis
Foto del perfil de Miriam Sinisterra
Foto del perfil de Marciá