[英]how to expand a child div than a parent with dynamic width on 100% of body
I need to build a menu inside an element which can have different width and different positions of the page. 我需要在元素内部构建一个菜单,该元素可以具有不同的页面宽度和位置。
I would like to create an edit menu which appears when hover on element,but I need the menu is as wide as the entire page 我想创建一个在悬停在元素上时出现的编辑菜单,但我需要的菜单与整个页面一样宽
I need to use position:absolute as not to "disturb" the page layout 我需要使用position:absolute来不“扰乱”页面布局
this is my fiddle http://jsfiddle.net/bkoqv52e/ 这是我的小提琴http://jsfiddle.net/bkoqv52e/
HTML HTML
<div class="container row">
<div class="col-md-6 left">
<nav>nav</nav>
<div class="content">content left</div>
</div>
<div class="col-md-6 right">
<nav>nav</nav>
<div class="content">content-right</div>
</div>
</div>
CSS CSS
.container {
width:100%;
background:#eee;
padding:30px;
}
nav {
height:30px;
background:#999;
display:none;
width:100%;
position:absolute;
top:-30px;
left:0;
}
.left {
background:#ddd;
height:300px;
}
.right {
background:#ccc;
height:200px;
margin-top:100px;
}
.col-md-6:hover > nav {
display:block;
}
Any suggestion is appreciated! 任何建议表示赞赏! thanks
谢谢
Without js, you can define .left and .right to position static in order to refer nav to container on position relative like: 没有js,你可以定义.left和.right来定位静态,以便在相对位置引用导航到容器:
.container { width:100%; background:#eee; padding:30px; position: relative; } nav { height:30px; background:#999; display:none; width:100%; position:absolute; left:0; } .left { background:#ddd; height:300px; position: static; } .right { background:#ccc; height:200px; margin-top:100px; position: static; } .col-md-6:hover > nav { display:block; }
<div class="container row"> <div class="col-md-6 left"> <nav>nav</nav> <div class="content">content left</div> </div> <div class="col-md-6 right"> <nav>nav</nav> <div class="content">content-right</div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.