Перекрытия выпадающего меню

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 от .dropdown-content до значения border-width из .dropbtn.

вот предварительный просмотр: jsfiddle.net/rrxmw3b3/1/

Answer 2

Для целей, которые вы хотите, так как он предназначен, необходимо указать 15px. Другой вариант:

.dropbtn { 
    ... 
    position: relative; 
} 

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

Вот предварительный просмотр: http://jsfiddle.net/bvdgw9vc/