Tengo el siguiente menú de perfil de usuario, con opciones básicas:
<ul class="profile-menu">
<li> <a class="profile-menu-trigger" data-trigger="dropdown" href="#">Logged in as Juanchi</a>
<ul class="profile-submenu submenu">
<li><a href="#">My account</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log out</a></li>
</ul>
</li>
</ul>
y su css que pongo también para darle forma
/* This is to locate the user menu */
.profile-menu{
list-style: none;
float:right;
margin-top: 30px;
margin-right: 20px;
}
/* This is to create a submenu a give it shape */
.profile-submenu{
list-style: none;
border: 1px solid #aaa;
background: #fff ;
margin-top: 30px;
box-shadow: 2px 2px 15px rgba(0,0,0,.3);
}
.submenu {
list-style: none;
border: 1px solid #aaa;
background: #fff ;
margin-top: 30px;
box-shadow: 2px 2px 15px rgba(0,0,0,.3);
width: 300px;
position: absolute;
right: 10px;
display: none;
}
.submenu a { /* This is to give shape to options inside menu affecting a's instead of <li> cause it is eassier */
text-decoration: none;
padding: 10px 10px;
display:block;
color: #333;
text-shadow: none;
font-weight: 600;
}
La cuestión es que cuando visualizo el menú, por alguna razón que desconozco, la primera letra de cada elemento <a>
se encuentra desplazada ligeramente a la derecha sin embargo en ningún momento he usado margin left
, ni letter-spacing
ni nada que lo desplace. Adjunto foto.