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