如何在将指针移到文本 1x 的div上时显示可滚动菜单,则会显示可滚动菜单。
我想要做的是类似于下图:
我的代码结构:
.spdText {
width: 3em;
height: 1.8em;
line-height: 1.8em;
position: relative;
font-size: 1em;
font-weight: 900;
text-shadow: none;
border-radius: 10%;
color: #29303b;
background-color: hsla(0,0%,100%,.9);
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.speed:hover,
.btnSpd:hover .speed {
display: inline-table;
list-style: none;
max-height: 300px;
transition: max-height 1s;
top: -170px;
}
<div class="spdText">1x
<ul class="speed">
<li>x3</li>
<li>x1</li>
</ul>
</div>
答案 0 :(得分:0)
这样的东西?
编辑: 首先,在“spdText”上方留出一个空格。你将'speed'放在'spdText'上,给它一个负顶值。
.spdText {
width: 3em;
height: 1.8em;
line-height: 1.8em;
position: relative;
font-size: 1em;
font-weight: 900;
text-shadow: none;
border-radius: 10%;
color: #29303b;
background-color: hsla(0,0%,100%,.9);
margin-top:5rem; /* You leave a space above */
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.spdText:hover .speed {
display: block;
list-style: none;
max-height: 300px;
transition: max-height 1s;
left:-25px;
background-color: black;
opacity: 0.5;
color: white;
top: -4.4rem;
}
<div class="spdText">1x
<ul class="speed">
<li>x3</li>
<li>x1</li>
</ul>
</div>