I have a problem. There is such code:

.hover { width: 100%; background: red; height: 50px; position: absolute; top: 0; left: 0; } .hover:hover { height: 100px; } select { margin-top: 50px; } 
 <div class="hover"></div> <select name="" id=""> <option value="">123131231232131</option> <option value="">131231231312122</option> <option value="">31231313131313</option> <option value="">13131313131314</option> <option value="">51232131313123</option> </select>

enter image description here If you hover on the top block, it increases the height and overlaps the select. But, if the option list is open, it overlaps this block. How can this be fixed?

PS z-index is not suitable for this.

Upd: Correct that the list of options over the hover block is necessary for it to be under it. Upd2: Now it looks like this enter image description here It is necessary that the list of options is under the block

  • Correct that ????? And what should be the end result ...? - Air
  • Is absolute positioning required? - Ruslan Semenov
  • why not use z-index ? - Evgeny Nikolaev
  • @YevgenyNikolaev, because it does not work - Gettysburg
  • @RuslanSemenov yes, it is necessary - Gettysburg

3 answers 3

As an option select wrap in a div (should help when resizing a hover)

  • Anyway, the block with option is visible and overlaps the div - Gettysburg

Not that position. If already tied to the absolute.

 body { margin: 0; padding: 0; } .hover { width: 100%; background: red; height: 50px; position: ralative; transition: height 200ms; top: 0; left: 0; } .hover:hover { height: 100px; } select { top: 50px; position: absolute; } 
 <div class="hover"></div> <select name="" id=""> <option value="">123131231232131</option> <option value="">131231231312122</option> <option value="">31231313131313</option> <option value="">13131313131314</option> <option value="">51232131313123</option> </select>

  • Thanks, but, so went up and select, but on the contrary - Gettysburg

 .hover { width: 100%; background: red; height: 50px; position: absolute; top: 0; left: 0; z-index:10; } .hover:hover { height: 100px; } .hover:hover ~ #select{ margin-top: 100px; } #select { position:relative; z-index:100; margin-top: 50px; } 
 <div class="hover"></div> <select name="" id="select"> <option value="">123131231232131</option> <option value="">131231231312122</option> <option value="">31231313131313</option> <option value="">13131313131314</option> <option value="">51232131313123</option> </select>