0
過去幾天我一直在試圖解決這個問題。我有一個下拉按鈕和一些下拉內容。它完美的作品。我遇到的問題是下拉內容不與按鈕對齊。它放置在除按鈕之外的任何位置，具體取決於頁面調整大小的方式。將下拉內容對齊到下拉按鈕
我想我做錯了什麼，我到目前爲止所嘗試的一切都沒有正確工作。
這裏是我的代碼：Image
所以，我的問題是 - 你將如何對準的下拉內容：什麼，我想實現
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('#dropdown')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.navigator {
font-family: sans-serif;
background-color: #f4f4f4;
height: 80px;
width: 100%;
position: fixed;
}
.navigator #navigator-contents {
width: 85%;
text-align: center;
margin: 0 auto;
}
.navigator #navigator-contents .logo {
background-color: #f4f4f4;
float: left;
height: 80px;
line-height: 82px;
}
.navigator #navigator-contents .logo img {
vertical-align: middle;
}
.navigator #navigator-contents .logo h2 {
font-size: 1.40em;
display: inline;
vertical-align: middle;
margin: 0;
}
.navigator #navigator-contents .clock {
float: right;
height: 80px;
width: 100px;
line-height: 80px;
}
.navigator #navigator-contents .clock img {
vertical-align: middle;
}
.navigator #navigator-contents .clock h4 {
display: inline;
vertical-align: middle;
margin: 0;
margin-left: -1px;
}
.navigator #navigator-contents .dropdown {
width: 100px;
height: 80px;
display: inline-block;
line-height: 82px;
position: relative;
cursor: pointer;
outline: none;
float: right;
}
.navigator #navigator-contents .dropdown:hover {
background-color: #e5e5e5;
color: #000;
}
.navigator #navigator-contents .dropdown:focus {
background-color: #1a5dad;
color: #fff;
}
.navigator #navigator-contents .dropdown h4 {
display: inline;
vertical-align: middle;
}
.navigator #navigator-contents .dropdown-content {
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
background-color: #f4f4f4;
display: none;
position: absolute;
z-index: 1;
margin-top: 80px;
}
.navigator #navigator-contents .dropdown-content .drop-content {
display: inline-block;
padding: 30px;
float: left;
}
.navigator #navigator-contents .dropdown-content .drop-content span {
font-size: 16px;
display: inline;
vertical-align: middle;
margin: 0;
margin-left: -1px;
right: 5px;
}
.navigator #navigator-contents .dropdown-content .drop-content i {
font-size: 1.10em;
}
.navigator #navigator-contents .dropdown-content .drop-content:hover {
transition: all .2s;
background-color: #1a5dad;
color: #fff;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.navigator #navigator-contents .show {
border-top: 2px solid #1a5dad;
display: block;
}<div class="navigator">
<div id="navigator-contents">
<div class="clock">
<a href="#">
<h4>Time: </h4>
<h4>13:34</h4>
</a>
</div>
<div class="dropdown" id="dropdown" onclick="myFunction()">
<h4 id="dropdown">Home <i class="fa fa-caret-down" aria-hidden="true"></i></h4>
</div>
<div class="dropdown-content" id="myDropdown">
<a href="#">
<div class="drop-content">
<span>This</span>
</div>
</a>
<a href="#">
<div class="drop-content">
<span>Is</span>
</div>
</a>
<a href="#">
<div class="drop-content">
<span>Dropdown</span>
</div>
</a>
<a href="#">
<div class="drop-content">
<span>Content</span>
</div>
</a>
</div>
</div>
</div>圖片菜單按鈕，讓它留在那裏，即使它調整大小？