使选项卡下拉菜单的内容从右下角延伸到左侧

<div class="tab-container">
  <div class="tab">选项卡1</div>
  <div class="tab">选项卡2</div>
  <div class="tab">选项卡3</div>
</div>

.tab-container {
  position: relative;
}

.tab {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200px;
  background-color: #fff;
  display: none;
}

var tabs = document.getElementsByClassName('tab');
var dropdownMenus = document.getElementsByClassName('dropdown-menu');

for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    var dropdownMenu = this.nextElementSibling;
    dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
    
    // 调整下拉菜单的位置
    var rect = this.getBoundingClientRect();
    dropdownMenu.style.right = window.innerWidth - rect.left - rect.width + 'px';
    dropdownMenu.style.bottom = window.innerHeight - rect.top + 'px';
  });
}