When users click Header button >> Show more buttons like this

You can follow these steps.
#1. Use this code to Custom CSS box
div.additional-buttons {
position: absolute;
top: 50px;
display: flex;
flex-direction: column;
}
div.additional-buttons>a.btn:first-child {
margin-bottom: 10px;
}
div.header-actions-action>a.btn:after {
content: "\e009";
font-family: 'squarespace-ui-font';
position: relative;
top: 2px;
}
a.show-hide:after {
transform: rotate(180deg);
}
div.header-display-desktop a.btn:after {
display: inline-block;
}

#2. Use this code to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$('.btn.btn--border').click(function(event) {
event.preventDefault(); // Prevent default action of the <a> tag
// Toggle the show-hide class on the original button
$(this).toggleClass('show-hide');
// Check if the additional buttons already exist
if ($('.additional-buttons').length === 0) {
// Create a div containing two buttons
var buttonContainer = $('<div class="additional-buttons"></div>');
// Create buttons with the same classes as the original button
var button1 = $('<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary" href="https://google.com">Button 1</a>');
var button2 = $('<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary" href="https://facebook.com">Button 2</a>');
// Append two buttons to the container
buttonContainer.append(button1).append(button2);
// Append the container to the element with the specified classes
$('.header-actions-action.header-actions-action--cta').append(buttonContainer);
} else {
// If the buttons exist, remove them
$('.additional-buttons').remove();
$(this).removeClass('show-hide'); // Reset show-hide class when buttons are removed
}
});
</script>

#3. Change button text/url here
