父项下的css make元素

Question

i have the html like this :

<div class="a">
  <div class="b/>
</div>

and it shows like

 ---------
|   div  |
|        |
|[   b  ]|
 ---------

now, i want to make it to

 ---------
|   div  |
|        |
|        |
 ---------
[   b    ]

b is a list which from db , I cannot know the width so I cannot use something like "bottom: -100px".

 .a { position: relative; width: 100px; height: 100px; background: pink; } .a:hover>.b { display: block; position: absolute; bottom: 0; width: 100%; background: blue; } .b { display: none; } 

 <div class="a"> 123 <div class="b"> <ol> <li>123</li> </ol> </div> </div> 

Answer 1

You can use transform: translate(0, 100%); .

 .a { position: relative; width: 100px; height: 100px; background: pink; } .a:hover>.b { display: block; position: absolute; bottom: 0; width: 100%; background: blue; transform: translate(0, 100%); } .b { display: none; } 

 <div class="a"> 123 <div class="b"> <ol> <li>123</li> </ol> </div> </div> 

Answer 2

Give top: 100%; in .a:hover > .b class and remove bottom:0 property.

 .a { position:relative; width:100px; height:100px; background : pink; } .a:hover > .b{ display:block; position:absolute; top: 100%; width:100%; background : blue; } .b { display:none; } 

 <div class="a"> 123 <div class="b"> <ol> <li>123</li> </ol> </div> </div> 

Answer 3

Use top: 100%; instead:

.a:hover>.b {
    display: block;
    position: absolute;
    top: 100%;
    width: 100%;
    background: blue;
}