Dropdown Menu with Pure HTML
A tutorial without javascript
Dropdown Menu with Pure HTML
A tutorial without javascript
Created by me using Flux.1-dev
As I was diving into building a new CSS component library, **AltCSS**, I was challenged to create a dropdown menu with zero JavaScript or custom CSS. The goal was simple: design a lightweight solution using only the power of HTML. It’s a minimalistic approach, and I want to share how I solved this, leveraging the core features of HTML.
This article explores two ways to create a dropdown menu:
- Using hover effects.
- Using a click mechanism.
Let’s get started!
Not a Medium member? Read for free via **my friend link**!
Hover-Triggered Dropdown
When you hover over a button, a dropdown appears. It’s a smooth interaction that doesn’t require any clicking. I use TailwindCSS for minimal CSS overhead to manage the hover effect.
<!-- Hover Dropdown -->
<div class="relative group">
<button>
Hover Dropdown
</button>
<div class="absolute hidden group-hover:block">
<a href="#" class="block">Option 1</a>
<a href="#" class="block">Option 2</a>
<a href="#" class="block">Option 3</a>
<a href="#" class="block">Option 4</a>
</div>
</div><div class="relative group">: Therelativeclass positions the dropdown container relative to the surrounding elements, and thegroupclass allows us to apply styles to nested elements when the parent element is hovered.- The
hiddenclass initially hides the dropdown div, andgroup-hover:blockmakes it appear by setting the class toblockwhen the parentgroupis hovered.
As simple as that!
Click-Triggered Dropdown
The second method uses the <details> and <summary> HTML elements. When clicked, the content inside <details> expands, revealing the dropdown options.
<!-- Click Dropdown -->
<div class="relative">
<details>
<summary class="cursor-pointer">
Click to Open
</summary>
<div class="absolute">
<a href="#" class="block">Option A</a>
<a href="#" class="block">Option B</a>
<a href="#" class="block">Option C</a>
<a href="#" class="block">Option D</a>
</div>
</details>
</div>Internally, when you click the <summary> element, it toggles an open attribute on the <details> element:
<!-- Before click -->
<details>
<summary>Click me</summary>
Hidden content
</details>
<!-- After click -->
<details open>
<summary>Click me</summary>
Hidden content
</details>The presence of this open attribute affects two key CSS properties:
displayof the content inside<details>(not including<summary>)- A rotation transforms on a default disclosure triangle marker.
We take advantage of the same to seamlessly implement the dropdown. This is directly baked into native HTML. This makes it quite efficient and is one of the best ways to implement collapsable UI elements.
Putting It All Together
Here’s the complete code with both the hover and click dropdown menus. I use TailwindCSS to improve the aesthetics and overall design.
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black text-white flex items-center justify-center min-h-screen space-x-6">
<!-- Hover Dropdown -->
<div class="relative group">
<button class="bg-amber-900 hover:bg-amber-800 px-6 py-3 rounded-lg transition">
Hover Dropdown
</button>
<div class="absolute left-0 hidden w-40 bg-gray-800 rounded-lg group-hover:block">
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 1</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 2</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 3</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 4</a>
</div>
</div>
<!-- Click Dropdown -->
<div class="relative">
<details>
<summary class="bg-teal-800 hover:bg-teal-700 px-6 py-3 rounded-lg cursor-pointer transition">
Click to Open
</summary>
<div class="absolute left-0 w-40 bg-gray-800 rounded-lg">
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Option A</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Option B</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Option C</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Option D</a>
</div>
</details>
</div>
</body>
</html>Live demo on codepen.io:
[embed]
Conclusion
This tutorial explored two simple ways to create dropdown menus. By leveraging Tailwind's group and group-hover classes, or the details and summary elements, you can create clean and efficient dropdowns without the need for JavaScript or explicit custom CSS.
However, our journey does not stop here. My goal with AltCSS is to bake such coding patterns directly into the design system and native CSS of HTML, with aesthetics included. So, if you use AltCSS to create a dropdown, you should ideally write zero CSS classes. Your HTML will not include even a single TailwindCSS class, as it will be taken care of internally.
I have implemented a basic version of the same as part of the v0.0.8 release of AltCSS. You can find a live demo of a navigation menu implemented using it on its official website (https://aditya-xq.github.io/altcss/).
Note: Responsiveness is natively baked into AltCSS. The nav menu will be visible on smaller screen sizes, while the normal nav bar is present on desktop/laptop view. So, check it out on your phone screen!
Want to read more pure HTML/CSS implementations? Check this out!
[embed]InPage Tabs with Pure HTML and CSS Another tutorial without JavaScriptmedium.com
메타데이터
- post_id
- 4db23d85ef36
- slug
- dropdown-menu-with-pure-html-4db23d85ef36
- url
- https://medium.com/the-research-nest/dropdown-menu-with-pure-html-4db23d85ef36
- canonical_url
- https://medium.com/the-research-nest/dropdown-menu-with-pure-html-4db23d85ef36
- author_url
- https://medium.com/@xq-is-here
- status
- ok
- fetched_at
- 2026-07-22 03:37:30
