CODEWITHSUNDEEP
htmlcss
Rahul Pamnani
Rahul Pamnani

Reputation: 1435

Not able to show list below text on hover using CSS

I want to show the list on hover using CSS and the list is coming but on the left, it is not coming below the text.

This is my code (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>

This is my 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;
}

I want to show the list below the text not on the left like the GROW list should show below the GROW only.

Any help is much appreciated.

    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>

Upvotes: 1

Views: 28

Answers (1)

Muhammad Bilal
Muhammad Bilal

Reputation: 118

Add display:flex and flex-direction: column style to myserv-in tag.

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

Modify the Style as below Complete Code Snippet:

    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>

Upvotes: 1

Related Questions