下拉菜單可顯示DIV

Question

我正在嘗試創建一個簡單的CSS下拉菜單，該功能是正確的，但是當我將其放置在固定的DIV中時遇到了問題。 菜單在DIV內展開並添加滾動條。

我試圖隱藏溢出並定位元素，但沒有效果：

JSFIDDLE

 body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 20px 50px 150px; font-size: 13px; text-align: center; } .dropdown { text-align: left; display: inline; margin: 0; padding: 0px 4px 0px 0px; list-style: none; } .dropdown li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; /*padding: 15px 20px;*/ background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .dropdown li:hover { background: #555; color: #fff; } .dropdown li ul { padding: 0; position: absolute; top: 18px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } .dropdown li ul li { display: block; color: #000; padding-bottom: 5px; } .dropdown li ul li:hover { background: #666; } .dropdown li:hover ul { display: block; opacity: 1; visibility: visible; } 

 <div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD; overflow: auto; background-color: #FFF; text-align: center; border-radius: 10px; width:100%; height:50px;"> <ul class="dropdown"> <li>Section1 <ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </li> </ul> </div> 

Answer 1

嘗試這樣： JSFIDDLE

.dropdown {
    text-align: left;
    display: inline-block;
    margin: 0;
    padding: 0px 4px 0px 0px;
    list-style: none;
    position:absolute;
    top:0;
}

HTML：

<div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD;
background-color: #FFF;
text-align: center;
border-radius: 10px;
width:100%;
height:50px; position:relative;">

添加position relative to div並刪除overflow屬性。 然后add position:absolute to dropdown 。 希望這可以幫助 ！！

下面的代碼片段

 body { font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 20px 50px 150px; font-size: 13px; text-align: center; } .dropdown { text-align: left; display: inline-block; margin: 0; padding: 0px 4px 0px 0px; list-style: none; position:absolute; top:0; } .dropdown li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; /*padding: 15px 20px;*/ background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .dropdown li:hover { background: #555; color: #fff; } .dropdown li ul { padding: 0; position: absolute; top: 18px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } .dropdown li ul li { display: block; color: #000; padding-bottom: 5px; } .dropdown li ul li:hover { background: #666; } .dropdown li:hover ul { display: block; opacity: 1; visibility: visible; } 

 <div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD;background-color: #FFF;text-align: center;border-radius: 10px;width:100%;height:50px; position:relative;"> <ul class="dropdown"> <li>Section1 <ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </li> </ul> </div> 

Answer 2

給.dropdown一個position absolute; 也一樣

小提琴

Answer 3

請試試這個：

請添加.dropdown CSS像這樣： position absolute;

JSFIDDLE

 body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 20px 50px 150px; font-size: 13px; text-align: center; } .dropdown { position: absolute; text-align: left; display: inline; margin: 0; padding: 0px 4px 0px 0px; list-style: none; } .dropdown li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; /*padding: 15px 20px;*/ background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .dropdown li:hover { background: #555; color: #fff; } .dropdown li ul { padding: 0; position: absolute; top: 18px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } .dropdown li ul li { display: block; color: #000; padding-bottom: 5px; } .dropdown li ul li:hover { background: #666; } .dropdown li:hover ul { display: block; opacity: 1; visibility: visible; } 

 <div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD;overflow: auto;background-color: #FFF;text-align: center;border-radius: 10px;width:100%;height:50px;"> <ul class="dropdown"> <li>Section1 <ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </li> </ul> </div>