Home
Alok
Dropdown select on hover

Dropdown select on hover

this example does not uses javascript

This tailwind example is contributed by Alok, on 22-Apr-2023. Component is made with Tailwind CSS v3. It is responsive.

Author Alok

29.3k

<div class="flex items-center justify-between space-x-5 bg-white px-4">
            <a class="menu-hover my-2 py-2 text-base font-medium text-black lg:mx-4" onClick="">
                Choose Day
            </a>
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="h-6 w-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                </svg>
            </span>
        </div>

<a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2">
                Sunday
            </a>

<a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2">
                Monday
            </a>

<a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2">
                Tuesday
            </a>

<a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2">
                Wednesday
            </a>

<a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2">
                Thursday
            </a>

<a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2">
                Friday
            </a>

<a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2">
                Saturday
            </a>

</div>
    </div>
</div>

Related Examples

Dropdown menu without using javascript
Open the dropdown menu on hover

Author:
Asher Wilde

2 years ago

19.3k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

3 years ago

17.8k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

2 years ago

20.1k
Nested dropdown
Nested dropdown without using javascript. It uses details and summary HTML tags for interactivity.

Author:
Emrys11

2 years ago

14.3k
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Author:
Shariar Hasan

1 year ago

5.7k
Dropdown select on hover
this example does not uses javascript

Author:
Thomas Taylor

1 year ago

2.1k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Maxim

10 months ago

4k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

7 months ago

1.4k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

7 months ago

965
User List
List of users

Author:
Marcos Vinicios Nussemeyer

5 months ago

1k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
SANJAY SINGH GARIYA

4 months ago

447
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components