jquery - element moves after click event -

i have custom dropdown works fine, except when click toggle starting element moves. have ideas? have tried changing code around width position etc.

html:

    <div class="element" style="position: absolute; right: 200px; top:50px; color: white; cursor: pointer;">         <span class="my-dropdown" href="#" id="user-name">             john doe <span style="font-size:smaller;">&#9660;</span>         </span>         <ul class="my-dropdown-menu" data-for="user-name">             <li><a href="#">logout</a></li>             <li><a href="#">change password</a></li>             <li><a href="#">profile</a></li>         </ul>     </div> 

css:

.my-dropdown-menu a, .link {   color: black; }  .my-dropdown-menu a:visited, .visited {    color: black; }  .my-dropdown-menu a:active, .active {    color: black; }  .my-dropdown {     color: white;     font-size: larger;     position: relative;     width: 300px; }  .my-dropdown-menu {     display: none;     color: black;     font-size: large;     text-align: left;     padding-left: 20px;     padding-bottom: 5px;     padding-top: 5px;     position: relative;     left: -30px;     z-index: 50;     background-color: white;     width: 200px;     border-radius: 5px; }  .my-dropdown-menu li{     margin-top: 20px;     margin-bottom: 20px; } 

js:

$('.my-dropdown').on("click", function () {     var id = $(this).prop('id');     console.log(id);     var dropdown = $("ul[data-for='" + id + "']");     dropdown.toggle(); }); 

i put jsbin

span inline element. use div in .my-dropdown instead.

http://jsfiddle.net/jhut61ro/4/

edit:

you have href attribute in element. should remove that.