davepermen/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <ul>
      <li>
        <section>entry stuff bla</section>
        <menu>
          <li>edit <a href='/'>🖫</a></li>
          <li>download <a href='/'>▼</a></li>
          <li dangerous>delete <a href='/'>✕</a></li>
        </menu>
      </li>
      <li>
        <section>entry stuff bla</section>
        <menu>
          <li>edit <a href='/'>🖫</a></li>
          <li>download <a href='/'>▼</a></li>
          <li dangerous>delete <a href='/'>✕</a></li>
        </menu>
      </li>
      <li>
        <section>entry stuff bla</section>
        <menu>
          <li>edit <a href='/'>🖫</a></li>
          <li>download <a href='/'>▼</a></li>
          <li dangerous>delete <a href='/'>✕</a></li>
        </menu>
      </li>
      <li>
        <section>entry stuff bla</section>
        <menu>
          <li>edit <a href='/'>🖫</a></li>
          <li>download <a href='/'>▼</a></li>
          <li dangerous>delete <a href='/'>✕</a></li>
        </menu>
      </li>
      <li>
        <section>entry stuff bla</section>
        <menu>
          <li>edit <a href='/'>🖫</a></li>
          <li>download <a href='/'>▼</a></li>
          <li dangerous>delete <a href='/'>✕</a></li>
        </menu>
      </li>
    </ul>
  </body>
</html>

## styles.css
*:not(head, script, meta, style) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  font-family: sans-serif;
  border: 0;
  line-height: 1;
}

html {
  color-scheme: dark;

  --color: white;
  --background-color: black;
  --accent-color: mediumspringgreen;
  --warning-color: #ddfa00;
  --danger-color: #ff0565;
  --shadow: black;
}

@media (hover: none) {
  ul {
    width: 100%;
  }
  ul > li {
    overflow: auto;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    &::-webkit-scrollbar {
      display: none;
    }

    display: flex;
    & > section {
      min-width: 100%;
    }
    & > * {
      scroll-snap-align: start;
    }
  }
  menu {
    display: flex;
  }
}

ul {
  padding: 5rem;

  --bg1: #333;
  --bg2: #222;
  --rowheight: 3rem;

  & > li {
    --bg: var(--bg1);
    background: var(--bg);
    &:nth-of-type(2n + 1) {
      --bg: var(--bg2);
    }
  }
}

ul > li {

  display: flex;
  position: relative;
  transition: all 0.25s linear;

  & > section {
    padding: 1rem;
  }
}


@media(hover: hover) {

  ul > li {
    &:hover {
      scale: 1.01;

      filter: drop-shadow(0 0 2rem var(--shadow));
      z-index: 1;

      & menu {
        color: var(--accent-color);
        opacity: 1;
      }
    }

    &:has(menu:hover) {
      filter: drop-shadow(0 0rem 2rem var(--shadow)) drop-shadow(0 0rem 2rem var(--shadow));
    }
  }

  menu {
    position: absolute;
    top: 0;
    padding-block-start: var(--rowheight);
    right: 0;

    &:hover {
      opacity: 1;

      & li {
        opacity: 1;
      }
    }

    & li {
      opacity: 0;
    }

    &:hover::after {
      color: var(--color);
      background-color: var(--accent-color);
      filter: drop-shadow(0 0 2rem var(--accent-color));
    }

    &::after {
      transition: all 0.25s linear;
      content: "☰";
      position: absolute;
      display: grid;
      right: 0;
      top: 0;
      width: 3rem;
      height: 3rem;
      line-height: 3rem;
      font-size: 1.5rem;
      text-align: center;
    }
  }
}

menu {
  transition: all 0.25s linear;

  & li {
    display: grid;
    grid-auto-flow: column;
    place-items: center end;
    padding-inline-start: 1rem;
    gap: 1rem;
    width: 100%;
  }

  & li {
    position: relative;

    transition: all 0.25s linear;

    background: var(--bg);

    color: var(--color);

    &:hover {
      background: var(--accent-color);

      filter: drop-shadow(0 0 2rem var(--accent-color));

      z-index: 1;
    }
  }

  & a {
    color: var(--accent-color);
    text-decoration: inherit;
    width: 3rem;
    height: 100%;
    font-size: 1.5rem;
    font-weight: 900;
    text-align: center;
    line-height: 3rem;

    &:hover {
      color: white;
    }

    &:after {
      content: "";
      position: absolute;
      inset: 0;
    }
  }
}

[dangerous] {
  --accent-color: var(--danger-color);
}
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<ul>
	<li>
	<section>entry stuff bla</section>
	<menu>
	<li>edit <a href='/'>🖫</a></li>
	<li>download <a href='/'>▼</a></li>
	<li dangerous>delete <a href='/'>✕</a></li>
	</menu>
	</li>
	<li>
	<section>entry stuff bla</section>
	<menu>
	<li>edit <a href='/'>🖫</a></li>
	<li>download <a href='/'>▼</a></li>
	<li dangerous>delete <a href='/'>✕</a></li>
	</menu>
	</li>
	<li>
	<section>entry stuff bla</section>
	<menu>
	<li>edit <a href='/'>🖫</a></li>
	<li>download <a href='/'>▼</a></li>
	<li dangerous>delete <a href='/'>✕</a></li>
	</menu>
	</li>
	<li>
	<section>entry stuff bla</section>
	<menu>
	<li>edit <a href='/'>🖫</a></li>
	<li>download <a href='/'>▼</a></li>
	<li dangerous>delete <a href='/'>✕</a></li>
	</menu>
	</li>
	<li>
	<section>entry stuff bla</section>
	<menu>
	<li>edit <a href='/'>🖫</a></li>
	<li>download <a href='/'>▼</a></li>
	<li dangerous>delete <a href='/'>✕</a></li>
	</menu>
	</li>
	</ul>
	</body>
	</html>
	*:not(head, script, meta, style) {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: grid;
	font-family: sans-serif;
	border: 0;
	line-height: 1;
	}

	html {
	color-scheme: dark;

	--color: white;
	--background-color: black;
	--accent-color: mediumspringgreen;
	--warning-color: #ddfa00;
	--danger-color: #ff0565;
	--shadow: black;
	}

	@media (hover: none) {
	ul {
	width: 100%;
	}
	ul > li {
	overflow: auto;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	&::-webkit-scrollbar {
	display: none;
	}

	display: flex;
	& > section {
	min-width: 100%;
	}
	& > * {
	scroll-snap-align: start;
	}
	}
	menu {
	display: flex;
	}
	}

	ul {
	padding: 5rem;

	--bg1: #333;
	--bg2: #222;
	--rowheight: 3rem;

	& > li {
	--bg: var(--bg1);
	background: var(--bg);
	&:nth-of-type(2n + 1) {
	--bg: var(--bg2);
	}
	}
	}

	ul > li {

	display: flex;
	position: relative;
	transition: all 0.25s linear;

	& > section {
	padding: 1rem;
	}
	}


	@media(hover: hover) {

	ul > li {
	&:hover {
	scale: 1.01;

	filter: drop-shadow(0 0 2rem var(--shadow));
	z-index: 1;

	& menu {
	color: var(--accent-color);
	opacity: 1;
	}
	}

	&:has(menu:hover) {
	filter: drop-shadow(0 0rem 2rem var(--shadow)) drop-shadow(0 0rem 2rem var(--shadow));
	}
	}

	menu {
	position: absolute;
	top: 0;
	padding-block-start: var(--rowheight);
	right: 0;

	&:hover {
	opacity: 1;

	& li {
	opacity: 1;
	}
	}

	& li {
	opacity: 0;
	}

	&:hover::after {
	color: var(--color);
	background-color: var(--accent-color);
	filter: drop-shadow(0 0 2rem var(--accent-color));
	}

	&::after {
	transition: all 0.25s linear;
	content: "☰";
	position: absolute;
	display: grid;
	right: 0;
	top: 0;
	width: 3rem;
	height: 3rem;
	line-height: 3rem;
	font-size: 1.5rem;
	text-align: center;
	}
	}
	}

	menu {
	transition: all 0.25s linear;

	& li {
	display: grid;
	grid-auto-flow: column;
	place-items: center end;
	padding-inline-start: 1rem;
	gap: 1rem;
	width: 100%;
	}

	& li {
	position: relative;

	transition: all 0.25s linear;

	background: var(--bg);

	color: var(--color);

	&:hover {
	background: var(--accent-color);

	filter: drop-shadow(0 0 2rem var(--accent-color));

	z-index: 1;
	}
	}

	& a {
	color: var(--accent-color);
	text-decoration: inherit;
	width: 3rem;
	height: 100%;
	font-size: 1.5rem;
	font-weight: 900;
	text-align: center;
	line-height: 3rem;

	&:hover {
	color: white;
	}

	&:after {
	content: "";
	position: absolute;
	inset: 0;
	}
	}
	}

	[dangerous] {
	--accent-color: var(--danger-color);
	}
	}