纯CSS下拉菜单（子菜单不能逃脱div标签）

Question

我已经检查了10个左右的帖子，似乎是问同一个问题，但没有太多的清晰度。

我用五个选项创建了一个纯CSS下拉菜单。这些选项（选项2和3）两个包含自己的子菜单：

#topnav_frame { 
 
    color: rgba(245, 245, 245, 1); 
 
    font-size: 1.15em; 
 
    font-weight: bold; 
 
    background-color: rgba(85, 85, 85, 1); 
 
} 
 
#topnav { 
 
    min-width: 1200px; 
 
    max-width: 1200px; 
 
    margin: 0em auto; 
 
    overflow: auto; 
 
    zoom: 1; 
 
    font-size: .75em; 
 
    padding: 0px 10px; 
 
} 
 
#topnav ul.menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    z-index: 1000; 
 
} 
 
#topnav ul.menu li { 
 
    display: block; 
 
    float: left; 
 
    position: relative; 
 
    width: 160px; 
 
} 
 
#topnav ul.menu li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: 15px; 
 
    background-color: rgba(85, 85, 85, 1); 
 
    color: rgba(255, 255, 255, 1); 
 
    margin-left: 1px; 
 
    text-align: center; 
 
} 
 
#topnav ul.menu li.submenu ul.hidden li a { 
 
    padding: 15px; 
 
    width: 130px; 
 
    text-align: left; 
 
} 
 
#topnav ul.menu li.submenu ul.hidden { 
 
    position: absolute; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: none; 
 
} 
 
#topnav ul.menu li.submenu:hover ul.hidden { 
 
    display: block; 
 
    z-index: 1000; 
 
} 
 
#topnav ul.menu li a:hover { 
 
    background-color: rgba(105, 105, 105, 1); 
 
}

<div id="topnav_frame"> 
 
    <div id="topnav"> 
 
    <ul class="menu"> 
 
     <li><a href="">Home</a> 
 
     </li> 
 
     <li class="submenu"><a href="">Option 1</a> 
 
     <ul class="hidden"> 
 
      <li><a href="">View Option 1</a> 
 
      </li> 
 
      <li><a href="">Edit Option 1</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="submenu"><a href="">Option 2</a> 
 
     <ul class="hidden"> 
 
      <li><a href="">Current Option 2</a> 
 
      </li> 
 
      <li><a href="">Option 2 History</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="">Option 3</a> 
 
     </li> 
 
     <li><a href="">Option 4</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

的JS小提琴可以被看作here。

将鼠标放在li.submenu上时出现问题。菜单下降，但是菜单下降到div的“内部”，而不是div的“外部”。 topnav溢出隐藏，所以滚动条变得可见。我希望子菜单弹出“外部”，如果div。

我已经改变了Z-指数，以反映这种变化要求（的z-index：0的topnav框架和的z-index：1000两者的UL菜单和子菜单

任何想法？

Answer 1

如预期那样工作：。你#topnav元素设置overflow:auto如果你去悬停选项2或3，向下滚动，出现.submenu

只是将其删除您将不得不作出一个不同的clearfix。

#topnav { 
min-width: 1200px; 
max-width: 1200px; 
margin: 0em auto; 
/* overflow: auto; */ 
zoom: 1; 
font-size: .75em; 
padding: 0px 10px; 
} 

仅供参考，overflow:auto使容器外的内部元素不可见，您必须滚动才能看到它。见：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow