переключение делает странный эффект JQuery

Может кто-нибудь объяснить мне, почему это выпадающее меню действует странно, вместо того, чтобы отображать меню над изображением, оно создает какой-то странный эффект

это живой пример (я не знаю, как отображать изображения на скрипке) Fiddle (http://jsfiddle.net/8YqKc/2/)

   #dropMenu {
    display: none; 
    position: relative; 
    right: 5px; 
    background: #000; 
    color: black; 
    margin:30% -5% 0% -142%;
    padding: 0px 0px 0px 10px;
}

#dropMenu a { 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    padding:10px 6px;
    font-weight:400;
    border-bottom: solid 1px #fff;
}

#dropMenu a:hover { 
    background: #57585A; 
}

#dropMenu ul {
    list-style:none;
    padding:0;
}

$(document).ready(function() {
 $("li").click(function() {
                 $("#dropMenu").hide("slow");
            });

  $("a").click(function(){
    $(this).toggleClass("active");
    $(this).next("div").stop('true','true').slideToggle("slow");
  });

});

  <a href="#"><img src="images/menu.png" width="22" height="23" alt="CSUSB Logo" style="margin: 0px 15px 0px 0px;" id="menudiv"></a>
        <div id="dropMenu">
          <ul>
            <li><a href="#campusalerts">Campus Alerts</a></li> 
          </ul> 
        </div> <!-- DropMenu termina -->    
  </ul> 
</div>