Skip to content

Instantly share code, notes, and snippets.

@lappi-lynx
Created November 5, 2025 22:03
Show Gist options
  • Select an option

  • Save lappi-lynx/e68163f3cbaa9791e81fc37c9e1bb85e to your computer and use it in GitHub Desktop.

Select an option

Save lappi-lynx/e68163f3cbaa9791e81fc37c9e1bb85e to your computer and use it in GitHub Desktop.
position-try css dropdown menu example - no js dropdown menu for different screen positioning
<html>
<body>
<button popovertarget="menu">Menu</button>
<div id="menu" popover>
<a href="https://www.google.com">Google</a>
<a href="https://www.yahoo.com">Yahoo</a>
<a href="https://www.bing.com">Bing</a>
</div>
<style>
body {
min-height: 100vh;
font-family: 'Poppins', Tahoma, Geneva, Verdana, sans-serif !important;
display: flex;
align-items: start;
justify-content: start;
}
button {
padding: 0.7em 2em;
font-size: 1em;
font-weight: 400;
color: #fff;
background-color: #4e22d4;
border: none;
border-radius: 0.25em;
cursor: pointer;
anchor-name: --menu;
font-family: inherit;
}
#menu {
width: max-content;
border: 1px solid #ccc;
border-radius: 0.25em;
padding: 0.5em;
background-color: #fff;
box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1);
position: absolute;
position-anchor: --menu;
inset: unset;
top: anchor(bottom);
left: anchor(left);
position-try-fallbacks: --below-right, --below-left, --up-left;
&:popover-open {
display: grid;
}
a {
text-decoration: none;
padding: 0.7em 1.25em;
border-radius: 0.25em;
color: #000;
}
a:hover {
background-color: #eee;
}
}
@position-try --below-right {
inset: unset;
top: anchor(bottom);
left: anchor(left);
}
@position-try --below-left {
inset: unset;
top: anchor(bottom);
right: anchor(right);
}
@position-try --up-left {
inset: unset;
bottom: anchor(top);
right: anchor(right);
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment