0

Tengo una página Web a la que le agregue un menú con sus diferentes opciones, y a una de esas opciones subsecciones, como podrán ver el código. Hago prueba de mi página local y me funciona perfectamente en pantalla completa y de manera responsive; mi problema es que, al momento de subirlo a un host (en mi caso a HostGator), no funciona el menú de manera responsive, es decir, cuando yo doy clic a la opción de Certificación de sistemas de gestión no se muestran las opciones de ISO 9001:2015, ISO 14001:2015 e ISO 45001:2018; pero cuando esta en pantalla completa si funciona, y de manera local no me da ningún error y si me dirige a los HTML a los que los direcciono, ya que mis nombres si coinciden a como se llama el archivo .html

Espero me puedan ayudar por favor

Código HTML:

<nav class="menu navegacion">
            <ul>
                <li><a href="index.html">Inicio</a></li>
                <li class="submenu"><a href="#">Certificación de sistemas de gestión<span class="icon-down-open"></span></a>
                    <ul>
                        <li><a href="ISO-9001-2015.html">ISO 9001:2015</a></li>
                        <li><a href="ISO-14001-2015.html">ISO 14001:2015</a></li>
                        <li><a href="ISO-45001-2018.html">ISO 45001:2018</a></li>
                    </ul>
                    </li>
                    <li><a href="acerca_de.html">Acerca de</a></li>
                    <li><a href="proceso_certificacion.html">Proceso de Certificación</a></li>
            </ul>
        </nav>

Código CSS:

/* ------------------------------------------menu--------------------------------------------*/

header {
    height: 7rem;
    background-color: #000000;
    color: #FFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#btn-menu {
    display: none;
}

header label {
    font-size: 3rem;
    cursor: pointer;
    display: none;
}

.menu ul {
    background: #000000;
    display: flex;
    list-style: none;
}

.menu ul ul {
    display: none;
}

.menu a {
    display: block;
    padding: 1.5rem 2rem;
    color: #FFF;
    text-decoration: none;
}

menu a:hover {
    background: rgba(0, 0, 0, 0.3);
}

menu a span {
    margin-left: 1rem;
}

.menu ul li:hover ul {
    display: block;
    position: absolute;
}

@media (max-width:768px) {
    header {
        height: 7rem;
        background-color: #000000;
        color: #FFF;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    header label {
        display: block;
    }
    .menu {
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        transform: translateX(-100%);
        transition: all 0.3s;
    }
    .menu ul {
        display: block;
        background: #555;
    }
    .menu ul li:hover ul {
        display: none;
        position: static;
    }
    .menu a span {
        position: absolute;
        right: 5px;
    }
    #btn-menu:checked~.menu {
        transform: translateX(0%);
    }
    /* .menu ul ul {
        background: rgba(0, 0, 0, 0.3);
    }*/
    .menu ul ul a {
        padding: 1.5rem 4rem;
    }
}

1 respuesta 1

0

el error esta en los estilos, actualízalo a lo siguiente:

    header {
    height: 7rem;
    background-color: #000000;
    color: #FFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#btn-menu {
    display: none;
}

header label {
    font-size: 3rem;
    cursor: pointer;
    display: none;
}

.menu ul {
    background: #000000;
    display: flex;
    list-style: none;
}

.menu ul ul {
    display: none;
}

.menu a {
    display: block;
    padding: 1.5rem 2rem;
    color: #FFF;
    text-decoration: none;
}

menu a:hover {
    background: rgba(0, 0, 0, 0.3);
}

menu a span {
    margin-left: 1rem;
}

.menu ul li:hover ul {
    display: block;
    position: absolute;
}

.submenu ul li:hover { /*cambia el color de las opciones ISO al colocar el puntero sobre alguna opción, aplica para cualquier tamaño de pantalla*/
    background: #555;
}
@media (max-width:768px) { /*todo lo que esta dentro de esta sección aplica para pantallas con un ancho menor o igual a 768 pixeles*/
    header {
        height: 7rem;
        background-color: #000000;
        color: #FFF;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    header label {
        display: block;
    }
    .menu {
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        transform: translateX(-90%); /*deja visible el 10% del menú*/
        transition: all 0.3s;
    }
    .menu:hover {
        transform: translateX(0%); /*deja visible el 100% del menú cuando se coloca el puntero sobre el menú*/
        transition: all 0.3s;
    }
.submenu:hover ul {/*hace visible las opciones ISO al colocar el puntero encima del sub menú Certificación de sistemas de gestión*/
    display: block;
}
    .menu ul {
        display: block;
    }
    .menu ul li:hover ul {
        position: static;
    }
    .menu a span {
        position: absolute;
        right: 5px;
    }
    #btn-menu:checked~.menu {
        transform: translateX(0%);
    }
    /* .menu ul ul {
        background: rgba(0, 0, 0, 0.3);
    }*/
    .menu ul ul a {
        padding: 1.5rem 4rem;
    }
}
3
  • @BetaM cierto, he editado mi respuesta
    – Ben
    Commented el 1 oct. 2020 a las 3:19
  • Hola @Ben he utilizado tu código y si me muestra las ISO, solo tengo una duda, hay alguna función u opción para que al dar clic en Certificación de sistemas de gestión se suban u oculten de nuevo las opciones? Commented el 1 oct. 2020 a las 22:49
  • @MayraXimenaVargas claro, lo puedes hacer con javascript o bien jquery, en este enlace explican como funciona y como puedes aplicar el efecto toggle con jquery: (api.jquery.com/toggle)
    – Ben
    Commented el 2 oct. 2020 a las 2:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.