切换产生奇怪的效果jquery

Question

有谁能解释一下为什么这个下拉菜单很奇怪，而不是把菜单显示在图像上面，它会产生一些奇怪的效果。

这是一个活生生的例子(我不知道如何在小提琴上显示图像) 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>

Answer 1

这是因为默认的margin of UL将此添加到您的CSS中：

#dropMenu ul { margin:0 }