Skip to main content
2 de 2
Ortografía.
jachguate
  • 32.1k
  • 8
  • 41
  • 69

Menú HTML no funciona en host

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;
    }
}