不能在悬停时使用CSS显示文本下面的列表

Question

我想使用CSS在悬停时显示列表，列表会出现，但在左侧，它不会出现在文本下方。

这是我的代码(HTML):

<p class="text_show " style="font-size: 50px; line-height: 60px; padding-left: 55px; min-height: 283px;"><span class="b1"><span style="color: #fff; display: inline-flex;">BUILD »
→</span><span class="myserv-in"><a href="#">Design - UI/UX</a>
<a href="#">Application Development &amp; Maintenance</a>
<a href="#">Product Development</a>
<a href="#">Artificial Intelligence</a></span></span> <span class="b2"><span style="color: #fff; display: inline-flex;">GROW »
→</span><span class="myserv-in"><a href="#">Digital Strategy</a>
<a href="#">Digital Marketing</a>
<a href="#">eCommerce</a>
<a href="#">Design - Creatives</a>
<a href="#">Data and Analytics</a></span></span> <span class="b3"><span style="color: #fff; display: inline-flex;">RUN
→</span><span class="myserv-in"><a href="#">Managed Services</a>
<a href="#">Continuous Improvement</a>
<a href="#">Cloud And Infrastructure</a></span></span></p>

这是我的CSS:

span.myserv-in {
float: left;
color: #fff;
font-size: 16px;
list-style: none;
width: 100%;
line-height: 27px;
}
span.myserv-in {
display: none;
}
span.myserv-in > a {
display: block;
color: #fff;
}
span.b1:hover span.myserv-in,span.b2:hover span.myserv-in ,span.b3:hover span.myserv-in{
display: block;
}
p.text_show {
cursor: pointer;
}

我想在文本下面显示列表，而不是在左侧，就像GROW列表应该在GROW only下面显示一样.

任何帮助都非常感谢。

span.myserv-in {
float: left;
color: #fff;
font-size: 16px;
list-style: none;
width: 100%;
line-height: 27px;
}

span.myserv-in {
display: none;
}
span.myserv-in > a{
color: #000;
display: block;
}

span.b1:hover span.myserv-in,span.b2:hover span.myserv-in ,span.b3:hover span.myserv-in{
display: block;
}
p.text_show {
cursor: pointer;
}

<p class="text_show " style="font-size: 50px; line-height: 60px; padding-left: 55px; min-height: 283px;"><span class="b1"><span style="color: #000; display: inline-flex;">BUILD »
→</span><span class="myserv-in"><a href="#">Design - UI/UX</a>
<a href="#">Application Development &amp; Maintenance</a>
<a href="#">Product Development</a>
<a href="#">Artificial Intelligence</a></span></span> <span class="b2"><span style="color: #000; display: inline-flex;">GROW »
→</span><span class="myserv-in"><a href="#">Digital Strategy</a>
<a href="#">Digital Marketing</a>
<a href="#">eCommerce</a>
<a href="#">Design - Creatives</a>
<a href="#">Data and Analytics</a></span></span> <span class="b3"><span style="color: #000; display: inline-flex;">RUN
→</span><span class="myserv-in"><a href="#">Managed Services</a>
<a href="#">Continuous Improvement</a>
<a href="#">Cloud And Infrastructure</a></span></span></p>

Answer 1

为myservin标签添加display:flex和flex-direction: column样式

span.myserv-in > a{
color: #000;
display: flex;
flex-direction: column;
}

按如下方式修改样式

span.myserv-in {
float: left;
color: #fff;
font-size: 16px;
list-style: none;
width: 100%;
line-height: 27px;
}
span.b1, span.b2, span.b3 {
position: relative;
}
span.myserv-in {
display: none;
position: absolute;
left: 0px;
}
span.myserv-in > a{
color: #000;
display: flex;
flex-direction: column;
}

span.b1:hover span.myserv-in,span.b2:hover span.myserv-in ,span.b3:hover span.myserv-in{
display: block;
}
p.text_show {
cursor: pointer;
}

<p class="text_show " style="font-size: 50px; line-height: 60px; padding-left: 55px; min-height: 283px;"><span class="b1"><span style="color: #000; display: inline-flex;">BUILD »
→</span><span class="myserv-in"><a href="#">Design - UI/UX</a>
<a href="#">Application Development &amp; Maintenance</a>
<a href="#">Product Development</a>
<a href="#">Artificial Intelligence</a></span></span> <span class="b2"><span style="color: #000; display: inline-flex;">GROW »
→</span><span class="myserv-in"><a href="#">Digital Strategy</a>
<a href="#">Digital Marketing</a>
<a href="#">eCommerce</a>
<a href="#">Design - Creatives</a>
<a href="#">Data and Analytics</a></span></span> <span class="b3"><span style="color: #000; display: inline-flex;">RUN
→</span><span class="myserv-in"><a href="#">Managed Services</a>
<a href="#">Continuous Improvement</a>
<a href="#">Cloud And Infrastructure</a></span></span></p>