CODEWITHSUNDEEP
csstailwind-css
Umair
Umair

Reputation: 89

How to give a different width to the child div in a drop-down menu?

I need a little help. The submenu is taking the same width as the a tag which is causing the submenu items text to wrap. I want the submenu items to take as much width as the text needs.

<div class="relative">
            <a href="#" class="sm:mt-1 sm:px-1 md:px-3 py-1 block rounded sm:hover:bg-gray-600 sm:hover:bg-opacity-50 md:hover:font-bold">Menu Items<svg class="h-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg></a>
            <div id="submenu" class="absolute px-2 py-2 rounded bg-gray-300 shadow-lg">
                <ul>
                    <li><a href="#">Menu Item 1</a></li>
                    <li><a href="#">Menu Item 2</a></li>
                    <li><a href="#">Menu Item 3</a></li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </div>
        </div>

Upvotes: 0

Views: 78

Answers (2)

Umair
Umair

Reputation: 89

I was able to do it with the min-w-max property.

<div id="submenu" class="absolute min-w-max px-2 py-2 rounded bg-gray-200 shadow-lg">

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273839

Simply add whitespace-nowrap to submenu

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="relative inline-block ">
  <a href="#" class="sm:mt-1 sm:px-1 md:px-3 py-1 rounded sm:hover:bg-gray-600 sm:hover:bg-opacity-50 md:hover:font-bold">Menu <svg class="h-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg></a>
  <div id="submenu" class="absolute px-2 py-2 rounded bg-gray-300 shadow-lg whitespace-nowrap">
    <ul>
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li><a href="#">Menu Item 3</a></li>
      <li><a href="#">Menu Item 4</a></li>
    </ul>
  </div>
</div>

Upvotes: 1

Related Questions