<div class="info phone" >
    <a class="ffpr tw fz15" href="tel:+123123123">+7 (812) 565-36-65</a>
    <div class="header-indicator-personal whitebtn" style="margin-left: 20px;">
      <!-- <svg width="24" height="24" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" class="header-indicator__icon tp-icon" data-v-169581d9=""><path d="M4 24C4 19 9.9375 19 9.9375 19C9.9375 19 11.7188 21.1429 13.5 21.1429C15.2812 21.1429 17.0625 19 17.0625 19C17.0625 19 23 19 23 24" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path><path d="M19 9.5C19 13.229 16.408 16 13.5 16C10.592 16 8 13.229 8 9.5C8 7.67601 8.63364 6.32435 9.58922 5.42485C10.5543 4.51643 11.9222 4 13.5 4C15.0778 4 16.4457 4.51643 17.4108 5.42485C18.3664 6.32435 19 7.67601 19 9.5Z" stroke="currentColor" stroke-width="2"></path></svg> -->
      <div class="item-svg-s whitebtn btn-personal-menu"><svg class="item-svg-s whitebtn btn-personal-menu" width="24" height="24" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" class="header-indicator__icon tp-icon" data-v-169581d9=""><path class="btn-personal-menu" d="M4 24C4 19 9.9375 19 9.9375 19C9.9375 19 11.7188 21.1429 13.5 21.1429C15.2812 21.1429 17.0625 19 17.0625 19C17.0625 19 23 19 23 24" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path><path class="btn-personal-menu" d="M19 9.5C19 13.229 16.408 16 13.5 16C10.592 16 8 13.229 8 9.5C8 7.67601 8.63364 6.32435 9.58922 5.42485C10.5543 4.51643 11.9222 4 13.5 4C15.0778 4 16.4457 4.51643 17.4108 5.42485C18.3664 6.32435 19 7.67601 19 9.5Z" stroke="currentColor" stroke-width="2"></path></svg></div>
      <div class="personal-menu-menu show ffpr">
      <ul>
    
            <li><a href="" id="profile">Вход/Регистрация</a></li>
            <li><a href="">sdfsdf</a></li>
            <li><a href="">sdfsdf</a></li>';
 
      </ul>
    </div>
    </div>
    <a class="whitebtn" style="padding-left: 10px;" href="directory/cart"><svg width="24" height="24" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" class="header-indicator__icon tp-icon" data-v-169581d9=""><path d="M3 3L6 4L7.16667 7.5M7.16667 7.5L10 16H21.5L24.5 7.5H7.16667Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><line x1="9.89443" y1="15.9472" x2="7.89443" y2="19.9472" stroke="currentColor" stroke-width="2"></line><line x1="18" y1="22.5" x2="11" y2="22.5" stroke="currentColor" stroke-width="2"></line><circle cx="8.5" cy="22" r="2.5" stroke="currentColor" stroke-width="2"></circle><circle cx="19.5" cy="22" r="2.5" stroke="currentColor" stroke-width="2"></circle></svg></a>
    
</div>
</div>
</div>
.personal-menu-menu {
  display: none;
}

.show {
  display: block;
}
window.onclick = function(event) {
    if (!event.target.matches('.btn-personal-menu')) {
    var dropdowns = document.getElementsByClassName("personal-menu-menu");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
            }
          }
        }
      }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.