純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