javascript - 如何在父对象的100％上动态扩展子div而不是父对象

我需要在一个元素内构建一个菜单，该元素可以具有不同的宽度和页面的不同位置。

我想创建一个编辑菜单，当将鼠标悬停在元素上时会出现，但是我需要菜单与整个页面一样宽

我需要使用position：absolute以免“干扰”页面布局

这是我的小提琴
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;
}

任何建议表示赞赏！谢谢

最佳答案

如果没有js，则可以定义.left和.right来定位static，以便将nav引用到相对位置的容器上，例如：

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

关于javascript - 如何在父对象的100％上动态扩展子div而不是父对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28814106/