Clear absolute floated elements - html

Question

I try to make a hover effect. When user hovers one div it goes in position absolute and changes it's height. Here is the code:
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
.child {
position: relative;
z-index: 2;
width: 100%;
min-height: 48px;
}
.child:hover {
position: absolute;
z-index: 3;
border: 1px solid #c0c0c0;
}
.child .sub-child { display: none; }
.child:hover .sub-child { display: block; }
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-4">
<div class="child">
First
<ul class="sub-child">
<li>First</li>
<li>Second</li>
</ul>
</div>
</div>
<div class="col-xs-4 col-md-4">
<div class="child">Second</div>
</div>
<div class="col-xs-4 col-md-4">
<div class="child">
Third
<ul class="sub-child">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</div>
</div>
<div class="col-xs-4 col-md-4">
<div class="child">Fourth</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">Some text here</div>
</div>
</div>
The problem is that when hover goes to the last element from the row or to the last element from the list then content overlaps. How can I fix this?

Answer 1

I'm not sure if you're taking the right approach here, but I made some adjustments, including adding a parent div to the first row to add some margin so they don't overlap:
http://codepen.io/anon/pen/QbVewL
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
.menu{
margin-bottom: 20px;
}
.child {
position: relative;
z-index: 2;
width: 100%;
height: 48px;
border: 1px solid transparent;
box-sizing: border-box;
}
.child:hover {
position: absolute;
z-index: 3;
border: 1px solid #c0c0c0;
height: 62px;
background-color: #fff;
}