下拉菜单停止工作的较小屏幕

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