樣式下拉菜單

Question

我是新來的CSS HTML和JS。 我的問題是，下拉菜單就像窗口的一半，我不知道如何定位下拉菜單。我嘗試過的所有方法都不起作用。我的下拉菜單中的第二個問題是，只有當我點擊按鈕的某個部分時，下拉菜單纔會出現。你們能幫我嗎？ 這是我的代碼：

window.onclick = function(event) { 
 
    if (!event.target.matches('.dropdiv')) { 
 
    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'); 
 
     } 
 
    } 
 
    } 
 
}

.dropdiv { 
 
    background-color: #001155; 
 
    width: 40px; 
 
    height: 22px; 
 
} 
 
.dropdivs { 
 
    height: 4px; 
 
    width: 29px; 
 
    background-color: white; 
 
    color: white; 
 
    border: #001155; 
 
    border-radius: 5px; 
 
    margin: 2px; 
 
} 
 
/* Dropdown Button */ 
 

 
.dropbutton { 
 
    background-color: #001155; 
 
    color: white; 
 
    padding: 13px; 
 
    font-size: 14px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropdown { 
 
    position: absolute; 
 
    display: inline-block; 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
/* Dropdown Links*/ 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.show { 
 
    display: block; 
 
}

<div class="dropdown"> 
 
    <button onclick="myFunction()" class="dropbutton"> 
 
    <div class="dropdiv"> 
 
     <div class="dropdivs"></div> 
 
     <div class="dropdivs"></div> 
 
     <div class="dropdivs"></div> 
 
    </div> 
 
    </button> 
 
    <div id="inhalt" class="dropdown-content"> 
 
    <a href="https://www.google.ch/">Google</a> 
 
    <a href="https://intranet.swisscom.com/home/#/">Intranet</a> 
 
    <a href="https://www.facebook.com/">Facebook</a> 
 
    </div> 
 
</div>