I am working on a site built with Pico CSS. I have a nav dropdown as follows:

<body> <main class="container"> <nav> <ul> <li><strong>Dropdown Demo</strong></li> </ul> <ul> <li> <details class="dropdown"> <summary>Account</summary> <ul dir="rtl"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </details> </li> </ul> </nav> </main> </body>

(Codepen of this demo)

The oddity comes with that nested <ul> inside the dropdown nav item. The <details> is positioned relative and the <ul> is positioned absolute. As expected, if I inspect the <ul>, its offset parent is the <details>. When I click the dropdown to open it though, suddenly the offset parent changes to <body>. I think this is being caused by one of the styles applied when the <details> has an open attribute applied, but I've been unable to pinpoint exactly what is causing this.

Why would the offset parent be changing? What styles can cause this to happen to an absolute child inside a relative parent?

RedBassett's user avatar

Could only reproduce in Firefox, Chromium doesn't show any visual glitch.

Not sure what the exact cause is, but nav details.dropdown has display: inline applied via the Pico CSS. If I overwrite that with display: inline-block, the dropdown behaves as it should.

(That also changes the height of the hole nav element a bit, it becomes a bit smaller with inline-block on the details element. Might need to counter that with some additional margin, or playing with the line-height.)

C3roe's user avatar

2 Comments

Good catch! I'm also testing in FF, and I thought there was a chance of other browsers rendering differently but I hadn't fully tested it yet. I was hoping the answer was an easier "you're missing this one property here", but confirming that I'm not crazy and it should (and in other browsers, does) behave as expected is still good!

2026-04-13T22:25:47.073Z+00:00

After a little further testing: inline-block works for the <details> element. The change in size has to do with negative margins, I think, but this is easily solved with an additional margin: 0 on the same element. Marking as right answer as this solves the core issue in FF.

2026-04-13T23:28:21.55Z+00:00

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.