html - Clear absolute floated elements -

i try make hover effect. when user hovers 1 div goes in position absolute , changes it's height. here 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 when hover goes last element row or last element list content overlaps. how can fix this?

i'm not sure if you're taking right approach here, made adjustments, including adding parent div first row add margin 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; }