Выпадающее меню перестает работать для меньших экранов

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 ред. Чтобы исправить это, просто добавьте clear: both; и position: relative; к вашим элементам панели .hidden.

Пример:

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