1

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. Espacio indeseado en menu de perfil de usuario.

1 respuesta 1

3

Eso sucede porque las listas tienen por defecto un margen interno (padding).

Para quitarlo, simplemente agrega una regla para eliminarlo:

.profile-submenu{
    list-style: none;
    border: 1px solid #aaa;
    background: #fff ;
    margin-top: 30px;
    box-shadow: 2px 2px 15px rgba(0,0,0,.3);

    padding-left:0;
}

    
0

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.