How to increase size of dropdown menu?-CodePudding

I am using

<nav >
  <div >
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    <a x-data="{ active: false }">
      <button @click="active = !active">
        <span>Login</span>
        <div x-show="active" >
          <a>
            <label>Complementary text</label>
          </a>
        </div>

      </button>
    </a>

  </div>

</nav>

How to fix it?

https://codepen.io/bubnenkoff/pen/VwMmEgb

CodePudding user response：

Because your button is on the right, the dropdown disappears outside of the visible area. According to the docs you can use the class list "dropdown left no-wrap" to position the dropdown ("left") and have the width based on the content ("no-wrap").