0
149
VistasCSS3 Ligera sangría al pasar el cursor sobre un elemento de navegación
Cuando paso el cursor sobre el ícono principal de la primera ul de mi parte de nav , el menú desplegable aparece en la ubicación perfecta, sin embargo, cuando paso el mouse sobre los elementos del submenú, aparece una pequeña muesca que parece que no puedo encontrar la causa de .
Al pasar el cursor sobre el icono de tres puntos "...":
Al pasar el cursor sobre el subelemento del menú:
puede ver claramente la sangría cuando paso el mouse sobre el submenú que coloreé de violeta al pasar el mouse, que es exactamente cuando ocurrirá la sangría.
.main-navigation { position: absolute; right: 0px; margin-top: -20px; margin-right: 15px; width: 2em; height: 2em; color: #D9D9D9; border: 1px solid #D9D9D9; /* padding: auto; */ align-content: center; } .firstLevelul{ padding-left: 0; list-style: none; justify-content:flex-end; } .firstLevela{ display: block; text-align: center; font: normal small-caps 100 20px/1.8em 'Helvetica Neue'; text-decoration: none; } .firstLevela:hover{ color: #D9D9D9; width: 1.5em; height: 1.5em; } .secondLevelul{ display: none; } .secondLevela{ display: block; } .secondLevelli:hover{ background-color: violet; } .firstLevelli:hover > .secondLevelul{ display: block; width: 200px; height: 200px; background-color: white; border: 1px solid #D9D9D9; margin-left: -169px; } <nav class="main-navigation"> <ul className="firstLevelul"> <li className="firstLevelli"> <a href="#" className="firstLevela"><MoreHorizIcon className="editDropDownIcon" /></a> <ul className="secondLevelul"> <li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li> <li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li> <li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li> </ul> </li> </ul> </nav>1 Respuestas
Responde la pregunta0
Fue un poco difícil trabajar con esto ya que no proporcionaste mucho código.
Pero creo que el problema se basa en su height: 1.5em en el selector firstLevela:hover en CSS.
Hice este JSFiddle increíblemente rudimentario para demostrar