下拉菜單停止工作的較小屏幕

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

當除了它的工作原理，如果屏幕夠大，整個網頁的，但一旦屏幕寬度變得足夠小（大約900px），當您嘗試將鼠標放在最後一個選項上時，菜單消失：

任何想法是什麼讓菜單無法正常工作？

Answer 1

由於button浮動，但下拉不是clear ed這一事實而產生的定位問題。要修復它，只需將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; 
}