溢出隱藏和位置絕對菜單

我知道這些問題已被許多其他人所面對，並且有可用的解決方案。但是，我發現沒有任何問題與我相似，都爲父母錯過了position:relative。但是我已經爲父母使用position: relative和overflow:hidden，對子女使用position: absolute，但父母的隱藏隱藏子菜單隱藏在我的菜單中。溢出隱藏和位置絕對菜單

JSFIDDLE HERE

HTML

<head> 
<link rel='stylesheet' href="menu.css"> 

</head> 
<body> 
<div id="menu-container"> 
    <ul id='menu'> 
    <li><a href="#">Home</a></li> 
    <li><a href="#" class='drop'>S</a> 
     <ul> 
      <li><a href='#'>M</a></li> 
      <li><a href='#'>P</a></li> 
      <li><a href='#'>C</a></li> 
      <li><a href='#'>B</a></li> 
     </ul> 
    </li> 
    <li><a href="#" class='drop'>L</a> 
     <ul> 
      <li><a href='#'>1</a></li> 
      <li><a href='#'>2</a></li> 
      <li><a href='#'>3</a></li> 
      <li><a href='#'>4</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</body>

menu.css

#menu-container{ 
    margin: 60px; 
    margin-bottom: -20px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    /* Background color and gradients */ 
    background-color: white;/* 
    background-color: -moz-linear-gradient(top, #0272a7, #013953); 
    background-color: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); 
    /* Borders */ 
    border: 1px solid #002232; 
    -moz-box-shadow:inset 0px 0px 1px #edf9ff; 
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff; 
    box-shadow:inset 0px 0px 1px #edf9ff; 
    padding: 0; 
    z-index:20; 
    position: relative; 
    overflow: hidden; 
} 

#menu{ 
    list-style:none; 
    vertical-align: middle; 
    /* Rounded Corners */ 
    color: #2a6496; 
    position: relative; 
    margin: 0; 
    padding:0; 
    margin-left: 30px; 
} 

#menu li { 
    float:left; 
    display:block; 
    text-align:center; 
    position:relative; 
    overflow: hidden; 
    margin-right:30px; 
    border:none; 
    padding: 10px 15px 10px 15px; 
} 

#menu li:hover { 
    /* Background color and gradients */ 
    /* 
    background: linear-gradient(top, #F4F4F4, #e1e1e1); 
    background: -moz-linear-gradient(top, #F4F4F4, #e1e1e1); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#e1e1e1)); 
    */ 
    background: #428bca; 
    /* Rounded corners */ 

    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 

} 

#menu li a { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    color: #2a6496; 
    display:block; 
    outline:0; 
    text-decoration:none; 
} 

#menu li:hover > a { 
    color: white; 
} 
#menu li .drop { 
    padding-right:21px; 
    background:url("../../images/drop.png") no-repeat right 6px; 
    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
} 

#menu li ul{ 
    margin:4px auto; 
    position:absolute; 
    left:-999em; /* Hides the drop down */ 
    text-align:left; 
    /*padding:10px 5px 10px 5px;*/ 
    padding: 0; 
    border:1px solid #428bca; 
    border-top:none; 
    z-index: 999; 
    width: 200px; 
    /* Gradient background */ 
    background:white; 
    /*background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); 

    overflow-x: hidden; 
    */ 
    -moz-border-radius: 0px 0px 5px 5px; 
    -webkit-border-radius: 0px 0px 5px 5px; 
    border-radius: 0px 0px 5px 5px; 
} 

#menu li ul li{ 
    padding: 10px 10px 10px 10px; 
    position: relative; 
    z-index: 999; 
    width: 100%; 
    text-align: left; 
} 
#menu li ul li:hover{ 
    background: #13967e; 
} 
#menu li ul a{ 
    color: #2a6496; 
} 

#menu li ul li:hover a{ 
    color: white; 
} 
#menu li .input, #menu li .input:hover{ 
    background: white; 
} 

#menu li:hover ul { 
    left: -1px; 
    top:auto; 
}

刪除溢出菜單容器隱藏顯示犯規包含菜單的子菜單，但隨後的菜單容器。

有人可以幫我找到我做錯了什麼，這樣子菜單就顯示出來了。預先感謝您的時間和努力。

來源

2013-10-07 Optimus Prime

嘗試從li和＃menu-container中刪除overflow：hidden。添加到＃菜單容器這段代碼

#menu-container:after{ 
    content:''; 
    display:block; 
    clear:both; 
}

http://jsfiddle.net/Ltfx7/

來源

2013-10-07 08:10:52 Anon

驚訝！這完美的作品。 –

溢出隱藏和位置絕對菜單

回答

相關問題