如何使用css将dropdown div置于其他div与可滚动属性之上?

时间:2013-10-01 05:48:26

标签: html css position

我的下拉菜单中有样本列表。我的下拉菜单没有超过“快速拨号”框。我想在控件上方显示此下拉弹出窗口。怎么做?

来自html的示例代码如下: -

<div class="tree-container">
<div class="trees" style="overflow-y: scroll">
<ul class="tree" id="0" style="display: block;">
<li class="contact">
<div class="text">Digambar Patil</div>
<a class="arrow-submenu">
<img src="img/black_arrow_down.png">
<div class="contact-actions-menu" style="display: none;">
<ul>
<li><span>Call</span></li>
<li><span>Schedule</span></li>
<li><span>View Profile</span></li>
<li class="line"></li>
<li><span>Copy to group</span></li>
<li><span>Move to group</span></li>
</ul>
</div>
</a>
</li>
</ul>
</div>
</div>

使用的css如下 -

.tree-container {
background-color: #FCFCFC;
margin-left: 5px;
width: 221px;
padding-bottom: 6px;
margin-top: 5px;
min-height: 277px;
max-height: 470px;
margin-bottom: 10px;
}
.tree-container .trees {
height: 239px;
}
.tree-container .trees .tree li.contact {
margin-top: 4px;
margin-bottom: 4px;
margin-right: 9px;
margin-left: 9px;
padding: 3px 0px;
cursor: pointer;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
.tree-container .trees .tree li.contact .text {
margin-top: 2px;
float: left;
font-family: "OpenSansRegular";
font-size: 13px;
color: #797979;
text-decoration: none;
font-smooth: always;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
}
.tree-container .trees .tree li.contact .arrow-submenu {
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
line-height: 18px;
border: 1px solid transparent;
padding: 0px 4px;
float: right;
margin-right: 5px;
cursor: pointer;
display: none;
position: relative;
}
.tree-container .trees .tree li.contact .arrow-submenu .contact-actions-menu {
position: absolute;
border: 1px solid #c8c8c8;
background-color: #FFF;
padding: 7px 7px;
width: 170px;
margin-left: -170px;
margin-top: -2px;
display: none;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

enter image description here

0 个答案:

没有答案