roipoussiere/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

label, a {
    font-family: sans-serif;
}

#items-cb {
    display: none;
}

#items-lb {
    width: 7em;
    padding: 0.2em;
    height: 1.4em;
    border-radius: 4px;
    position: relative;
    display: block;
    background-color: #e9e9ed;
    border: 1px solid black;
}

#items-lb:hover {
    background-color: #d0d0d7;
}

#items-lb::after {
    content: ' 🞃';
}

#items-ul {
    display: none;
    list-style-type: none;
    padding: 2px;
    margin: 0;
    background-color: #f2f3f4;
    border-radius: 4px;
    width: 7em;
}

#items-ul li {
    padding: 0.2em;
}

#items-ul li a {
    width: 100%;
    color: black;
    text-decoration: none;
    cursor: default;
    display: block;
}

#items-ul li:hover, #items-ul li:target {
    background-color: #bcdef0;
}

#items-cb:checked~#items-ul {
    display: block;
}

:target {
    background-color: red;
}
</style>
</head>
<body>

<input id="items-cb" type="checkbox"/>
<label id="items-lb" for="items-cb">Select item</label>
<ul id="items-ul">
    <li id="item-1"><a href="?item=1#item-1">Item 1</a></li>
    <li id="item-2"><a href="?item=2#item-2">Item 2</a></li>
    <li id="item-3"><a href="?item=3#item-3">Item 3</a></li>
</ul>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>

	label, a {
	font-family: sans-serif;
	}

	#items-cb {
	display: none;
	}

	#items-lb {
	width: 7em;
	padding: 0.2em;
	height: 1.4em;
	border-radius: 4px;
	position: relative;
	display: block;
	background-color: #e9e9ed;
	border: 1px solid black;
	}

	#items-lb:hover {
	background-color: #d0d0d7;
	}

	#items-lb::after {
	content: ' 🞃';
	}

	#items-ul {
	display: none;
	list-style-type: none;
	padding: 2px;
	margin: 0;
	background-color: #f2f3f4;
	border-radius: 4px;
	width: 7em;
	}

	#items-ul li {
	padding: 0.2em;
	}

	#items-ul li a {
	width: 100%;
	color: black;
	text-decoration: none;
	cursor: default;
	display: block;
	}

	#items-ul li:hover, #items-ul li:target {
	background-color: #bcdef0;
	}

	#items-cb:checked~#items-ul {
	display: block;
	}

	:target {
	background-color: red;
	}
	</style>
	</head>
	<body>

	<input id="items-cb" type="checkbox"/>
	<label id="items-lb" for="items-cb">Select item</label>
	<ul id="items-ul">
	<li id="item-1"><a href="?item=1#item-1">Item 1</a></li>
	<li id="item-2"><a href="?item=2#item-2">Item 2</a></li>
	<li id="item-3"><a href="?item=3#item-3">Item 3</a></li>
	</ul>

	</body>
	</html>