0

tengo una página montada en HostGator, en la página hay un menú horizontal y al hacerlo responsive funciona muy bien de manera local, sin embargo las subcategorías como "ISO 9001:2015" etc, no se pueden ver cuando están montadas solo de manera responsive, no sé si algo cambia cuando lo subo al host o a que se deba.. Al dar clic para que me salga el menú donde se encuentra "ISO 9001:2015" y los demás cursos me sale lo siguiente: https://pagina.com/index.html#, así se llama la página principal, es decir, no me dirige a ningún lado

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

Según entiendo el problema es que los enlaces que conforman tu menú HTML no abren las páginas HTML a las que apuntas cuando lo subes a un hosting.

Es un problema con las rutas. Si esta desarrollando en Windows, por ejemplo, no es case-sensitive, sin embargo los servidores suelen ser máquinas Linux, que sí lo es. Entonces un A es lo mismo que una a en el nombre de un archivo si estas en Windows, pero en un servidor, esa diferencia hace que el archivo sea uno diferente y no "enlazan".

Si tu index.html está en el mismo directorio que los demás ficheros HTML, la ruta debería ser: href="./ISO-9001-2015.html" Esto debería funcionar si el fichero NO se llama iso-9001-2015.html, fíjate en las mayúsculas y minúsculas de los nombres.

2
  • No funcionan cuando están de tamaño responsive pero cuando abarcan toda la pantalla si abren las páginas HTML :( Commented el 30 sept. 2020 a las 20:54
  • Eso es raro. El CSS no tiene porque afectar a la navegación, a no ser que el elemento se vea en una zona diferente a donde se encuentre y no lo estés accionando... Veo que tienes translates seguramente estas clicando en un area que no acciona el enlace.
    – Orici
    Commented el 1 oct. 2020 a las 9:20

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.