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>