他のウェブページの要素の上にHTMLドロップダウンが表示されない

Question

この質問を投稿する前に、さまざまなスタックオーバーフローの質問を調べて実装しましたが、うまくいきませんでした。

この質問を重複して投稿しないでください。

私の問題は、私のドロップダウンが他の要素の上に来ていないということです。

私は jsfiddle

NOTEのコードを掲載している

：SCSSウィンドウでヘッダー

の適切なビューを取得するために、左に向けて出力ウィンドウをドラッグしてください、ユーザープロファイルのドロップダウンがクラスnavbarDropdownによって処理されます

.navbarDropdown { 
    float: right; 
    padding: 0px 10px; 
    position: relative; 

    img { 
    margin-top: -5px; 
    height: 40px; 
    } 

    ul { 
    background-color: $base-secondary-color; 
    padding: 4px 0; 
    position: absolute; 
    z-index: 999; 
    top: 30px; 
    left: 0; 
    width: auto; 
    border: none; 
    border-radius: 1px; 
    } 

    ul a { 
    height: 30px; 
    padding: 0 40px 0 10px; 
    display: block; 
    } 
} 

私は位置：absouluteとz-indexを試しました。

私は間違いがどこにあるのか分かりません。どんな助けもありがたいですか？

Answer 1

見た目では、ドロップダウンリストが非表示になっている理由は、nav要素のコンテンツ「.navbar」がオーバーフローしているためです。 CSSプロパティのオーバーフローを追加する：visible;すぐに問題を解決するはずです。