Question

有人可以解释一下为什么这个下拉菜单表现得很奇怪，而不是在图像上方显示菜单会产生一些奇怪的效果

这是一个实例（我不知道如何在小提琴上显示图像）小提琴（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的默认UL 在CSS中添加：

#dropMenu ul { margin:0 }

切换制作奇怪的效果jquery

1 个答案: