Skip to content

fix(dropdown): revert overflow hidden applied on details when they are inside .menu #4344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pdanpdan wants to merge 3 commits into
base: master
Choose a base branch
from
+21 −18
Open

fix(dropdown): revert overflow hidden applied on details when they are inside .menu #4344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03bee48
fix(dropdown): revert overflow hidden applied on details when they ar…
pdanpdan Dec 13, 2025
95e10a9
feat: consider `menu` as alternative to `ul` in `.menu`
pdanpdan Dec 13, 2025
4f06954
fix(menu): set items alignment for horizontal/vertical orientations
pdanpdan Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/daisyui/src/components/dropdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@
}

&:is(details) {
/* undo overflow hidden from menu */
overflow: revert-layer;

summary {
&::-webkit-details-marker {
@apply hidden;
Expand Down
36 changes: 18 additions & 18 deletions packages/daisyui/src/components/menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
--menu-active-bg: var(--color-neutral);
font-size: 0.875rem;

:where(li ul) {
:where(li ul, li menu) {
@apply relative ms-4 ps-2 whitespace-nowrap;

&:before {
Expand All @@ -19,7 +19,7 @@
@apply hidden;
}

:where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
:where(li:not(.menu-title) > *:not(ul, menu, details, .menu-title, .btn)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded-field grid grid-flow-col content-start items-center gap-2 px-3 py-1.5 text-start;
transition-property: color, background-color, box-shadow;
Expand Down Expand Up @@ -80,7 +80,7 @@
}

:where(
li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title),
li:not(.menu-title, .disabled) > *:not(ul, menu, details, .menu-title),
li:not(.menu-title, .disabled) > details > summary:not(.menu-title)
):not(.menu-active, :active, .btn) {
&.menu-focus,
Expand All @@ -90,7 +90,7 @@
}
:where(
li:not(.menu-title, .disabled)
> *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover,
> *:not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn):hover,
li:not(.menu-title, .disabled)
> details
> summary:not(.menu-title):not(.menu-active, :active, .btn):hover
Expand All @@ -114,8 +114,8 @@
@apply justify-self-end;
}

& > *:not(ul, .menu-title, details, .btn):active,
& > *:not(ul, .menu-title, details, .btn).menu-active,
& > *:not(ul, menu, .menu-title, details, .btn):active,
& > *:not(ul, menu, .menu-title, details, .btn).menu-active,
& > details > summary:active {
@apply outline-hidden;
color: var(--menu-active-fg);
Expand Down Expand Up @@ -156,10 +156,10 @@

.menu-horizontal {
@layer daisyui.l1.l2 {
@apply inline-flex flex-row;
@apply inline-flex flex-row items-center;

& > li:not(.menu-title) > details {
& > ul {
& > :is(ul, menu) {
@apply bg-base-100 rounded-box absolute ms-0 mt-4 origin-top py-2 pe-2 opacity-0;
scale: 95%;
box-shadow:
Expand All @@ -180,13 +180,13 @@
}
}

&[open] > ul {
&[open] > :is(ul, menu) {
@apply opacity-100;
scale: 100%;
}
}

& > li > details > ul {
& > li > details > :is(ul, menu) {
&:before {
--tw-content: none;
content: var(--tw-content);
Expand All @@ -197,9 +197,9 @@

.menu-vertical {
@layer daisyui.l1.l2 {
@apply inline-flex flex-col;
@apply inline-flex flex-col items-stretch;

& > li:not(.menu-title) > details > ul {
& > li:not(.menu-title) > details > is:(ul, menu) {
@apply relative ms-4 mt-0 py-0 pe-0;
background-color: revert-layer;
border-radius: revert-layer;
Expand All @@ -212,7 +212,7 @@

.menu-xs {
@layer daisyui.l1.l2 {
:where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
:where(li:not(.menu-title) > *:not(ul, menu, details, .menu-title)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded-field px-2 py-1;
font-size: 0.6875rem;
Expand All @@ -226,7 +226,7 @@

.menu-sm {
@layer daisyui.l1.l2 {
:where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
:where(li:not(.menu-title) > *:not(ul, menu, details, .menu-title)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded-field px-2.5 py-1;
font-size: 0.75rem;
Expand All @@ -240,7 +240,7 @@

.menu-md {
@layer daisyui.l1.l2 {
:where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
:where(li:not(.menu-title) > *:not(ul, menu, details, .menu-title)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded-field px-3 py-1.5;
font-size: 0.875rem;
Expand All @@ -254,7 +254,7 @@

.menu-lg {
@layer daisyui.l1.l2 {
:where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
:where(li:not(.menu-title) > *:not(ul, menu, details, .menu-title)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded-field px-4 py-1.5;
font-size: 1.125rem;
Expand All @@ -268,7 +268,7 @@

.menu-xl {
@layer daisyui.l1.l2 {
:where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
:where(li:not(.menu-title) > *:not(ul, menu, details, .menu-title)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded-field px-5 py-1.5;
font-size: 1.375rem;
Expand All @@ -281,7 +281,7 @@
}

/* allow use cases like group-hover:menu-active to make a menu item active when the menu is hovered */
:where(:not(ul, details, .menu-title, .btn)).menu-active {
:where(:not(ul, menu, details, .menu-title, .btn)).menu-active {
@layer daisyui.l1.l2 {
@apply outline-hidden;
color: var(--menu-active-fg);
Expand Down