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

18.5k

<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

1 year ago

14.3k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

1 year ago

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

Author:
Prajwal Hallale

1 year ago

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

Author:
Emrys11

1 year ago

9.4k
sponsored

Horizon UI PRO $69

The biggest time saver for your React web app project
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Author:
Shariar Hasan

4 months ago

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

Author:
Thomas Taylor

3 weeks ago

145
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Mehmet Kaplan

1 month ago

224
Select input

Author:
Sophia Baker

1 year ago

10.1k
Search bar with filter options

Author:
Piet Vriend

1 year ago

20.7k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

9 months ago

7.1k
Footer with App buttons
This example can be used if you want add your app buttons of store for download with brand logo, sitemap links and social media accounts.

Author:
Pagedone

2 months ago

684

Explore components by Tags

Didn't find component you were looking for?

Search from 1500+ componenent