0

El href de la clase dropdown-menu-item no funciona y no me redirige a la pagina submenu1/ que se encuentra en urls del proyecto. Se trata de un menú de navegación de tipo dropdown. Al hacer click en la opción servicios, la etiqueta dentro del menú desplegable no me redirecciona a la pagina web que mencione anteriormente. El resto de los href en las etiquetas a, funcionan a la perfección.

body,
html {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 1em;
}

.navbar {
  width: 100%;
  background-color: #4682B4;
  height: 80px;
  color: #fff;
}

.navbar .nav {
  margin: 0;
  padding: 0;
  float: left;
  list-style-type: none;
}

.navbar .nav li.nav-item {
  float: left;
  margin: 0 95px;
}

.navbar .nav li.nav-item>a {
  display: inline-block;
  padding: 15px 20px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-decoration: none;
}

.navbar .nav li.nav-item>a:hover {
  background-color: #B0C4DE;
}

.dropdown a:focus {
  background-color: #B0C4DE;
}

.dropdown a:focus~.dropdown-container {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
  -webkit-transition: max-height 0.5s ease-in;
  -moz-transition: max-height 0.5s ease-in;
}

.dropdown-container {
  position: absolute;
  top: 80px;
  max-height: 0;
  overflow: hidden;
  background: #4682B4;
  color: #B0C4DE;
}

.dropdown-container a {
  color: #fff;
  text-decoration: none;
}

.dropdown-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.dropdown-menu li a {
  display: inline-block;
  min-width: 250px;
  padding: 15px 20px;
  border-bottom: 1px solid #333;
}

.dropdown-menu li a:hover {
  text-decoration: none;
  background: #B0C4DE;
}
<body>
  <nav class="navbar">
    <ul class="nav" id="primary-nav">
      <li class="nav-item"><a href="/index/">Home</a></li>
      <li class="nav-item dropdown">
        <a href="#">Servicios</a>
        <div class="dropdown-container">
          <div class="dropdown-inner">
            <ul class="dropdown-menu">
              <li class="dropdown-menu-item"><a href="/sub1/">Submenu 1</a></li>
              <li class="dropdown-menu-item"><a href="#">Submenu2</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="nav-item"><a href="">Agenda</a></li>
      <li class="nav-item"><a href="">¿Quiénes somos?</a></li>
      <li class="nav-item"><a href="/contact/">Contacto</a></li>
    </ul>
  </nav>
</body>

1 respuesta 1

0

No estoy entendiendo bien la pregunta... submenu1 tiene alguna relación con Servicios? En cualquier caso estas son las dos cosas que puedo notar del código html:

1. Mencionas que la etiqueta "a" de Submenu 1:

a href="/sub1/">Submenu 1</a

Debería redireccionarte a la ruta /submenu1 y aquí se ve que href apunta a /sub1

2. Que la etiqueta "a" de servicios:

a href="#">Servicios</a

No te lleve a ningún sitio es porque el href no apunta a ninguno(#)

Perdón por el formato raro de la respuesta(ando desde tlf y se me complica un poco poner código) más tarde lo acomodo.

En caso de que mi respuesta no resuelve tu problema por favor replantea la pregunta y si es posible divide la pregunta en partes. ¡Saludos!

1
  • 1
    En realidad lo que estoy tratando de hacer es un menú de navegación de la pagina, donde al apretar Servicios, se despliegan las opciones submenu1 y submenu2. Luego al hacer click en submenu1 no me esta llevando a la ruta que le especifico en el href de submenu1. No se si se entiende bien la pregunta. Pero no me redirecciona al apretar submenu1. Saludos! Commented el 24 may. 2021 a las 16:53

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.