重叠下拉菜单

Question

我有一个可点击的下拉菜单，在border课程上放置dropbtn后，我的下拉dropdown-content菜单与下拉button边框dropbtn重叠

我可以将margin-top:15px添加到dropdown-content类来解决此问题，但有没有办法自动设置？

示例JSFiddle

Answer 1

你可以使用jQuery来达到预期的效果：

$(document).ready(function() {
  $(".dropdown-content").css("margin-top", $(".dropbtn").css("border-width"));
});

将margin-top的{​​{1}}设置为.dropdown-content的{​​{1}}值。

这是预览：jsfiddle.net/rrxmw3b3/1/

Answer 2

出于您的设计目的，您需要指定15px。另一种选择是：

.dropbtn {
   ...
   position: relative;
}

.dropdown-content {
    ...
    top: 15px;
}

预览：original issue in tracker