Overlapping Dropdown-Menü

Question

ich eine anklickbare Dropdown-Menü haben, nachdem er eine border auf dropbtn Klasse setzen, überlappt mein Dropdown-Menü dropdown-content mit dem Drop-Down-button Grenze dropbtn.

Ich kann hinzufügen margin-top:15px zu dropdown-content Klasse, um dies zu beheben, aber gibt es eine Möglichkeit, dies automatisch einzustellen?

Beispiel JSFiddle

Answer 1

Sie können jQuery verwenden, um die gewünschte Wirkung zu erzielen:

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

die die margin-top von .dropdown-content auf den Wert setzt der border-width von .dropbtn.

hier ist eine Vorschau: jsfiddle.net/rrxmw3b3/1/

Answer 2

Für die Zwecke Sie wollen, wie es konzipiert ist, müssen Sie die 15px angeben. Eine weitere Option ist:

.dropbtn { 
    ... 
    position: relative; 
} 

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

Hier die Vorschau: http://jsfiddle.net/bvdgw9vc/