It is necessary that a click-on (in our case) with the letter “M” appear a sub-menu, and when you click again to disappear, it would be great to implement this using jquery. Initially, the sub-menu is hidden using display: none;

https://codepen.io/anon/pen/XyXgpK

1 answer 1

So on your example)

  $(function() { $(".show__phones").on('click', function() { $(".hide__phones").toggle(); }); }); 
 .contacts__with__us { display: flex; } .phones__main__info { position: relative; } .phone { margin-right: 5px; } .show__phones:hover { cursor: pointer; } .hide__phones { display: none; position: absolute; opacity: 1; font-size: 14px; text-align: center; margin-top: 5px; margin-left: 10px; } .hide__phones span:first-child { margin-bottom: 5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="contacts__with__us"> <div class="phones__block vc"> <div class="phones__main__info"> <span class="phone">0(800) 215 350</span> <a class="show__phones"><span>M</span></a> </div> <div class="hide__phones"> <span>0 (099) 215 350</span> <span>0 (099) 215 350</span> </div> </div> </div>