1

Tengo un header compuestos por links de navegacion a otras webs, algunos de estos links se muestran a traves de desplegables . Con el evento hover le he añadido una animacion y estilo para ver sobre el que te encuentras en cada momento y que , en caso de ser un desplegable, te muestre todas las opciones. El tema es que una vez mostrado el desplegable les he añadido a los links internos el mismo estilo y animacion que a los principales, pero en el caso de la animacion me sale maquetado el subrayado siempre en el mismo sitio en lugar de justo debajo de cada link Si alguien me puede hacer ver mi error. Gracias por adelantado por vuestro tiempo y ayuda. Os dejo enlace con un ejemplo tal cual lo tengo ahora funcionando con el comportamiento descrito

https://codepen.io/carlosurra/pen/YzqXjdP

mi template


<div id="row">
        <div class="col-xs-12">
            <header>
                <nav class="navbar navbar-expand-lg navbar-light header">
                 
                  
                  <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav menu">
                      
                      <li class="nav-item">
                        <a class="nav-link">PERSONAL INFO</a>
                      </li>
                      <li class="nav-item" @mouseover="animalList = true" @mouseleave="animalList = false" >
                        <a class="nav-link menu-link-toggle" >PERSONAL FORM</a>
                        <ul class='dropdown-menu' v-if="animalList">
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>DATA</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>FORM DATA</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >AUTOCOMPLETE</a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item" @mouseover="serviceList = true" @mouseleave="serviceList = false">
                        <a class='nav-link menu-link menu-link-toggle' >SERVICES</a>
                        <ul class='dropdown-menu' v-if="serviceList">
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >PERSONAL S</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>COMPANY S</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >FULL S INFO</a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link ">SHOP</a>
                      </li>
                      <li class="nav-item active">
                        <router-link class="nav-link" to="/devis">PRICES</router-link>
                      </li>
                      <li class="nav-item" @mouseover="contactList = true" @mouseleave="contactList = false">
                        <a class='menu-link nav-link menu-link-toggle' >CONTACT</a>
                        <ul class='dropdown-menu' v-if="contactList">
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>MAIL</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >PHONE</a>
                          </li>
                        </ul>
                      </li> 
                    </ul>
                  </div>
              </nav>
            </header>
        </div>
    </div>

my css

html, body {
  background:  #009050;
}


.header {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.menu {
  list-style: none;
  display: flex;
  align-items: center;
}

.nav-item {
  padding: 25px;
  position: relative;
}

.nav-link:hover {
  color: white;
}

.menu-link-toggle {
  cursor: pointer;
}

.dropdown-menu {
  margin-top: 10px;
  list-style: none;
  position: absolute;
  padding: 1em 1.25em 0.5em 0.75em;
  background-color: white;
  width: max-content;
  box-shadow: 0px 14px 24px 0px rgba(0,0,0,0.21);
}

.dropdown-menu-item {
  margin: 20px 0 20px 0;
}

.dropdown-menu-link {
  font-size: 14px;
  font-weight: bold;
  color: red;
  text-decoration: none;
}

.head {
  font-size: 14px;
  color: red;
  font-weight: bold;
  text-decoration: none;
}



.nav-item:before {
  content: '';
  position: absolute;
  width: 30%;
  height: 3px;
  bottom: 30%;
  left: 35%;
  background: white;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}

.nav-item:hover:before,
.nav-item:focus:before {
  visibility: visible;
  transform: scaleX(1);

}

.dropdown-menu-link:before {
    content: '';
  position: absolute;
  width: 30%;
  height: 3px;
  bottom: 30%;
  left: 0%;
  background: #D53865;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;  
}

.dropdown-menu-link:hover:before,
.dropdown-menu-link:focus:before {
  visibility: visible;
  transform: scaleX(1);
}


.added {
  display: none;
}




1 respuesta 1

0

Añadiendo position: relative al .dropdown-menu-item y estableciendo una posición correcta en el bottom del .dropdown-menu-item:before, como 0px;

gracias por vuestro tiempo

1
  • Recuerda marcarla luego como aceptada para que todos sepan que tiene una solución :)
    – Alfabravo
    Commented el 11 ago. 2020 a las 13:19

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.