Default theme's VPFlyout does not show without JavaScript

[BeiyanYunyi]

Describe the bug

Default theme's VPFlyout has these css:

.VPFlyout:hover .menu,
.button[aria-expanded="true"] + .menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.button[aria-expanded="false"] + .menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
}

According to MDN Web Docs, the selector and + have the same specificity, which means the rule that comes next will override the rule that comes first. The result is, when JavaScript is disabled, the aria-expanded property will keep as false, and the contents of VPFlyout will never show.

Reproduction

Just go to the official docs site, disable JavaScript. Move mouse cursor over any VPFlyout components.

Expected behavior

The contents of VPFlyout should show with no JavaScript.

System Info

System:
    OS: Linux 6.10 Arch Linux
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 22.07 GB / 31.13 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 20.17.0 - ~/.nix-profile/bin/node
    npm: 10.8.2 - ~/.nix-profile/bin/npm
    pnpm: 9.9.0 - ~/.nix-profile/bin/pnpm
    bun: 1.1.29 - /usr/bin/bun

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.