CSS - 扩展元素，而不失去页面的原始结构。创建下拉菜单 [英] CSS- Expanding An Element Without Losing Page's Original Structure. To create Drop Down
问题描述
我想建立一个下拉式选单（浏览器< select> 标记的替代方式）。
I want to create a drop down menu (alternate to Browser's <select> tag).
所以在这里，我在另一个< div> 中创建了< div> ，以激发< select>
So Here I've created a <div> in another <div> to stimulate the <select>
但是当我展开下拉菜单< div> Exapanded div 下推所有其他页面的结构。
But When I expand the dropdown <div> The Exapanded div Pushes down all other page's structure.
我的意思是，这里是实际代码：
I mean, Here is output of my actual code:
点击展开产生：
Clicking on Expand Produces:
但我想输出有点像：
But I want Output Something Like :
我尝试添加 float：left ， z-index ， position：absolute; 等等，但没有运气。
I tried adding float:left, z-index, position:absolute; etc. But No Luck.
：
<html>
<head>
<title>Drop Down Demo</title>
<style type="text/css">
.ddown{
width:250px;
background: #aaa;
border: 2px solid #777;
color: #444;
text-align: center;
margin: 0px;
display: inline-block;
z-index:5;
float:left;
overflow:visible;
}
.ddown a{
width: 100%;
height: 25px;
text-align: left;
color: #666;
text-decoration: none;
background: #ddd;
border: 1px solid #999;
z-index:5;
display:none;
}
.ddownHead{
display: inline-block !important;
}
.ddownItem{
display: inline-block !important;
z-index:5;!important
}
.ddownItem:hover{
background: #33a;
color: #fff;
}
.ddown_busy{
background: #77a !important;
border: 1px solid #558 !important;
color: #fff !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function toggle_expand_ddown(x){
if($(x).closest("div").find("a").eq(0).hasClass("ddown_busy")){
$(x).closest("div").find("a").eq(0).removeClass("ddown_busy");
$(x).closest("div").find("div").each(function(){
$(this).find("a").each(function(){
$(this).removeClass("ddownItem");
});
});
}
else
{
$(x).closest("div").find("a").eq(0).addClass("ddown_busy");
$(x).closest("div").find("div").each(function(){
$(this).find("a").each(function(){
$(this).addClass("ddownItem");
});
});
}
}
</script>
</head>
<body>
<div style="width:100%;height:auto;background:#aa0;border:2px solid #770;z-index:10;">
<div class="ddown">
<a class="ddownHead" href="#!" Onclick="toggle_expand_ddown(this);">Click to Expand</a>
<div style="z-index:6;">
<a href="#!">Item 1</a>
<a href="#!">Item 1</a>
<a href="#!">Item 1</a>
<a href="#!">Item 1</a>
</div>
</div>
This is Another Child in same Parent
</div>
<div style="background:#eee;color:#555;width:100%;height:200px;display:inline-block;z-index:2;box-shadow:10px 10px 10px 2px rgba(0,0,0,0.8);border:2px solid #555;border-radius:12px;text-align:center;margin:5px;position:absolute;">Heya</div>
</body>
</html>
这里是： *** Fiddle ***
希望专家在这里会帮助我。感谢提前。
Hope Experts Here Will Help Me. Thanks In Advance.
推荐答案
我在您的电脑中只添加了 position：absolute 类和它的工作
I added only position:absolute in your class and it works
.ddown{
width:250px;
background: #aaa;
border: 2px solid #777;
color: #444;
text-align: center;
margin: 0px;
display: inline-block;
z-index:5;
float:left;
overflow:visible;
position: absolute;
}
这里 更新的小提琴
HERE the updated fiddle
这篇关于CSS - 扩展元素，而不失去页面的原始结构。创建下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
