how to expand a child div than a parent with dynamic width on 100% of body

Question

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

this is my fiddle http://jsfiddle.net/bkoqv52e/

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

    .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

Answer 1

Without js, you can define .left and .right to position static in order to refer nav to container on position relative like:

 .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>