小さな画面でドロップダウンメニューが機能しなくなる

Question

ドロップダウンメニューの作成に取り組んでいますが、特定の状況下でのみ動作することに気付きました。 自体によって単離された場合、メニューは完璧に動作します：

<nav class = "navigation"> 
        <div class="button-wrapper"> 
         <button> 
          <p>Resume</p>    
         </button> 
         <div class="hidden"> 
          <div class="menu-option"> 
           <p>Download<p> 
          </div> 
          <div class="menu-option"> 
           <p> 
            <a href ="http://www.mywebsite.com/resume.html"> 
             View Online 
            </a> 
           </p> 
          </div> 
         </div> 
        </div> 
        <div class="button-wrapper"> 
         <button> 
          <p>3D Modeling</p>    
         </button> 
         <div class="hidden"> 
          <div class="menu-option"> 
           <p>Portfolio(PDF)<p> 
          </div> 
          <div class="menu-option"> 
           <p>Projects</p> 
          </div> 
         </div> 
        </div> 
        <div class="button-wrapper"> 
         <button> 
          <p>Programming</p>    
         </button> 
         <div class="hidden"> 
          <div class="menu-option"> 
           <p>Projects<p> 
          </div> 
          <div class="menu-option"> 
           <p>Code Bits</p> 
          </div> 
         </div> 
        </div> 
        <div class="button-wrapper"> 
         <button> 
          <p>Other</p>     
         </button> 
         <div class="hidden"> 
          <div class="menu-option"> 
           <p>NA<p> 
          </div> 
         </div> 
        </div> 
        <div class="button-wrapper"> 
         <button> 
          <p>Contact</p>    
         </button> 
        </div> 
</nav> 

はCSS：

.button-wrapper { 
    color: black; 
} 

.hidden { 
    display: none; 
    margin: auto; 
    width: inherit 
    border: 1px solid black; 
} 

.hidden p { 
    width: inherit; 
    padding: 1px 0px 1px 10px; 
    background-color: white; 
} 

.menu-option:hover p { 
    background: #888; 
} 

a { 
    text-decoration: none; 
    color: black; 
} 

button { 
    float: right; 
     width: auto; 
    height: 40px; 
     padding: 10px 30px; 

} 

div { 
    background: #555; 
    margin: 0px; 
    border: 0px; 
    padding: 0px; 

} 

body, div, nav, footer { 
    background: #555; 
    margin: 0px; 
    border: 0px; 
    padding: 0px; 
} 

h2 { 
    width: 100%; 
    margin: 10px auto; 
    color: white; 
    text-align: center; 
} 

header div h1 { 
    color: white; 
     text-align: center; 
     margin: 0px; 
     padding: 11px; 
     height: 100px; 
} 

header, .content, footer { 
    width: 98%; 
    margin: 1%; 
    padding: 1%; 
} 

.button-wrapper:hover .hidden, .hidden:hover { 
    display: block; 
} 

p { 
    margin: 0px;  
} 

nav { 
    margin-left: auto; 
    margin-top: 60px; 
    display: flex; 
    background: none; 
} 

画面の大きさが十分であれば全体のウェブページのほかに、それは動作しますが、画面の幅が十分に小さくなったら、 （約900ピクセル）、最後のオプションの上にマウスを置くと、メニューが消えます。

メニューが正常に機能しない原因は何ですか？

Answer 1

buttonがフローティングされていて、ドロップダウンがclearではないという事実によって位置付けの問題があります。これを修正するには、.hiddenパネルエレメントにclear: both;とposition: relative;を追加してください。

例：.hidden pで

.hidden { 
    clear: both; // Add this line 
    position: relative; // And this line 
    display: none; 
    margin: auto; 
    width: inherit 
    border: 1px solid black; 
}