[tsigel]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
ul {
  margin-left: 20px;
  padding: 0px;
  display: inline;
  list-style: none outside none;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  position: relative;
}
  ul li.opndli {
  background-color: #FFFFFF;
  border-left: medium none currentColor;
  border-radius: 5px;
  display: none;
  float: left;
  font-weight: 400;
  height: 180px;
  left: 0px;
  margin: 0px;
  padding: 0px 5px;
  position: absolute;
  text-transform: capitalize;
  top: 22px;
  width: 360px;
  z-index: 99;
}
</style>
<span class="opnd">Войти через...</span>
  <ul>
    <li class="opndli" style="display: none;">
      тут содержимое
    </li>
  </ul>
</span>
<script>
jQuery(function(){
  jQuery("span.opnd").click(function () {
    jQuery("li.opndli").toggle("slow");
  });
});
</script>

Тестовый пример делается примерно так. Он должен наглядно отображать суть проблемы и его должно быть можно запустить.

Раскрасьте пример чтобы был виден эффект о котором вы говорите.

И ещё все эффекты типа slide, toggle и т.д. лучше применять к <div>