It is necessary that when you hover over one block, a second block appears at the bottom and they have a common stroke.

.item { width: 220px; height: 300px; margin: 10px 3px; float: left; position: relative; } .item:hover .item_inner { position: absolute; top: 0; left: 0; z-index: 10; background: #fff; box-shadow: 0 1px 14px rgba(0,0,0,0.3); height: 100%; } .item_param { display: none; text-align: left; padding: 0 5px; margin: 10px 0; background-color: #f3f3f3; } .item_inner{ width: 100%; height: 100%; position: relative; padding-bottom: 5px; border: 1px solid green; } .item_inner:hover .item_param { display: block; top: 100%; width: 100%; position: absolute; } 
 <div class="item"> <div class="item_inner"> TEXT <div class="item_param"> <p>info</p> <p>info</p> <p>info</p> <p>info</p> <p>info</p> <p>info</p> </div> </div> </div>

  • Everything works for you, but the problem seems to be in absolute terms. You wrote "top: 100%;" which means that the second block will be on the next "screen" of your browser. (look below) - Telion
  • yes everything works .. - Alexander Sizintsev
  • through the inherit property you can solve the problem - Invision
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

Decision

 .item_inner:hover .item_param { display: block; top: 100%; width: 100%; position: absolute; border: inherit; border-top: none; width: 210px; margin-top: 0px; margin-left: -1px; }

Demo: http://codepen.io/anon/pen/QNgpGp

    margin: 10px 0; .item_param gives an indentation from above - this leads to the lack of a common indent, or do you want the 2 blocks to have a green stroke?