オーバーフロープロパティのためにCSSのドロップダウンが表示されない

Question

私は今、角度/レールアプリケーションを作っています。私は、画面の上部にヘッダを設定し、imgにドロップダウン機能を置いています。私は本質的にユーザ情報のドロップダウンをしたいと思っています。 Googleのようなもの。 page-headerのoverflow: autoのため、CSSプロパティはドロップダウンが表示されません。しかし、私はそれを取る場合は、ヘッダー上のCSSを殺すので、私はそのプロパティを取ることはできません。 dropdown CSSの場合はどうすれば上書きできますか？ここで

は私のコードです：

<header class="page-header page-header--fixed"> 
     <a href="/" class="page-header-logo"><img src="/assets/logo-green.svg" alt="logo"></a> 

     <div class="dropdown"> 
     <img src="/assets/user_icon.svg" alt="User" onclick="myFunction()"> 
      <div id="myDropdown" class="dropdown-content"> 
       <a href="#home">Home</a> 
       <a href="#about">About</a> 
       <a href="#contact">Contact</a> 
      </div> 
     </div> 
</header> 

CSS

.page-header { 
    overflow: auto; 
     /*height:50px;*/ 
    padding: 8px 20px; 
    background-color: #07b1d1; 
    box-shadow: 0 3px 17px 0 rgba(0, 0, 0, 0.1); 
} 

.page-header--fixed { 
    position: relative; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 100; 
    border-top: 0; 
    background-color: white; 
} 

.dropdown { 
    float: right; 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    z-index: 200; 
    display: none; 
    position: absolute; 
    background-color: #F5F8F9; 
    min-width: 160px; 
    overflow: auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    right: 0; 
} 

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

.dropdown a:hover {background-color: #f1f1f1} 

.show {display:block;} 

Javascriptを：

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('.dropbtn')) { 

    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'); 
     } 
    } 
    } 
} 

Answer 1

はこれを試してみてください：

var x= document.getElementsByClassName("dropdown-content"); 
x.style.overflow= "auto"; 

Answer 2

.dropdown-contentクラスのCSSルールにoverflow:hiddenを追加するだけです。

.dropdown-content { 
     z-index: 200; 
     display: none; 
     position: absolute; 
     background-color: #F5F8F9; 
     min-width: 160px; 
     overflow: auto; 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
     right: 0; 
     overflow:hidden; 
    }