以下のコンテンツをオーバーラップする全体のナビゲーションバー

Question

ナビゲーションバーのCSSに問題があります。 This is what happens when I hover over .dropbtn. ここに、ドロップダウンナビゲーションバーのHTMLコードがあります。

<div class="nav-wrapper"> 
<ul id="nav"> 
<a href="#home"><img id="logo" src="Images/dramay.jpg"></a> 
    <li class="dropdown"> 

    <a href="#" class="dropbtn">Movies & TV &#9207;</a> 

    <div class="dropdown-content"> 
     <a href="#" id="mov"><b style="font-size: 15px">MOVIES</b></a> 
     <a href="#">In Theaters</a> 
     <a href="#">Coming Soon</a> 
     <a href="category.html">Categories</a> 
     <a href="#">Most Popular</a> 
     <a href="#" id="tv"><b style="font-size: 15px" > TV </b></a> 
     <a href="#" >Timings</a> 
     <a href="#">Latest shows</a> 
     <a href="#">Top rated</a> 
    </div> 
    </li> 

    <li class="dropdown"> 
    <a href="#" class="dropbtn">Celebs & photos &#9207;</a> 
    <div class="dropdown-content"> 
    <a href="#"><b style="font-size: 15px">Celebs</b></a> 
    <a href="#">Born today</a> 
    <a href="#">Most popular</a> 
    <a href="gallery.html"><b style="font-size: 15px">Photos</b></a> 
    <a href="#">latest stills</a> 
    <a href="#">Latest posters</a> 

    </div> 

    </li> 
    <li class="dropdown"> 
    <a href="#" class="dropbtn">News &#9207;</a> 
    <div class="dropdown-content"> 
     <a href="#"><b style="font-size: 15px">News</b></a> 
     <a href="#">Top news</a> 
     <a href="#">Movies news</a> 
     <a href="#">TV news</a> 
    </div> 

    </li> 

<li class="search" style="float:right;"><a> 
    <input type="text" name="firstname" placeholder="SEARCH"> 
</a> 
</li> 

    <li class="dropdown" id="signIN"> 
     <a href="signIN.html" class="dropbtn">Sign In</a> 
    </li> 
    <li class="dropdown" id="signUP"> 
     <a href="signUP.html" class="dropbtn">Sign Up</a> 
    </li> 

</ul> 
</div> 

ここにCSSがあります。

ul#nav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: inherit; 
    width: 100%; 
    overflow: hidden; 
    background: #332; 
} 


.nav-wrapper 
{ 
    position: fixed; 
    width: 100%; 
} 

li { 
float: left; 
} 

li a, .dropbtn { 
    display: inline-block; 
    color: lightgrey; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
    background-color:#00b300; 
} 

li a:hover, .search:hover { 
    background-color:black; 

} 
li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    color:black; 
    position: relative; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
    font-size: 15px; 
    z-index: 1; 
    } 

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

.dropdown:hover .dropdown-content { 
    display: block; 
} 

ul＃navと.nav-wrapperにはオーバーフローが表示されていますが、動作しません。 （私の悪い英語のために事前に謝罪）

Answer 1

以下を追加する

ul#nav { 
    overflow: visible; 
} 
ul#nav li { 
    position: relative; 
} 
.dropdown-content { 
    position: absolute; 
    left: 0px; 
    top: 100%; 
} 

Answer 2

メイクあなたのCSSでの2の変更： -

1）削除しoverflow: hidden;クラスul#navで

ul#nav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: inherit; 
    width: 100%; 
    /*overflow: hidden;*/ 
    background: #332; 
} 

2）の変更位置.dropdown-content

.dropdown-content { 
    background-color: #f9f9f9; 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
    color: black; 
    display: none; 
    min-width: 160px; 
    position: absolute; 
    z-index: 1; 
} 

で