Foro de elhacker.net

Hola amigos, estoy intentando hacer un boton flotante a lo largo de toda la web con el Glyphicon de Usuario. Y quiero que a su vez, sea un dropdown con los enlaces al Login y Registro de mi sitio. Estoy haciendolo en JS porque es como va a quedar al final y porque realmente es mas facil de reutilizar. Aqui vamos

 
function toLogin() {
    $("body").append('<a href="#" id="Login"><span id="toLogin" class="glyphicon glyphicon-user"></span></a>');
 
    /*
    *Aqui Iria la funcion para mostrar el dropdown 
    *
    */
}
 
 
$(document).ready(function () {
    toLogin();    
});
 
 

Y este es el estilo

#login{
    display:block; 
    text-decoration:none; 
    position:fixed; 
    bottom:50%; 
    left:10px; 
    z-index: 1000; 
    overflow:hidden; 
    width:4em; 
    height:4em; 
    border: 2px #000000 dashed; 
    border-radius: 10%; 
    text-indent:100%; 
    background-color: #5e5e5e;
}
#toLogin{
    font-size: 3em;
}

Lo que quiero lograr es un circulo de un tamaño visible con un borde discontinuo y dentro un glyphicon. Que cuando le pase el mouse por encima me muestre en un desplegable los enlaces a Login y Register. Ayuda por favor

Siempre que puedas hacerlo con css, hazlo, en js vas a tener que cambiar las propiedades con js y es molesto.

Con display es mas que suficiente.

.profile{
  position:absolute;
  background:#aaa;
  right:200px;
}
 
.profile .dropdown{
  position:absolute;
  background:#eee;
  padding:10px 20px;
  display:none;
}
 
.profile:hover .dropdown{
  display:block;
}

https://jsfiddle.net/7Lzno2q8/1/

Interesante!! Voy a probarlo en cuanto llegue a la casa. Pero.... Y se puede hacer el boton redondo y con un glyphicon en el medio como lo estaba intentando arriba?? De ser posible, como seria? Gracias por adelantado

Lo ajustas con border-radius como en tu ejemplo. 0-100% :)

Gracias!!! Te lo agradezco desde Cuba!