css使父元素下的元素

Question

我有这样的HTML：

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

，它显示为

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

现在，我想进入

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

b是db的列表，我不知道宽度所以我不能使用像“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

您可以使用transform: translate(0, 100%);。

HTTPSession

pandas.read_csv(path, sep = ',' ,header=None)

Answer 2

在top: 100%;课程中提供.a:hover > .b并移除bottom:0属性。

.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

改为使用top: 100%;：

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