No replies
rogerg
rogerg's picture
Offline
newbie
Last seen: 20 weeks 1 day ago
Timezone: GMT+2
Joined: 2021-05-31
Posts: 1
Points: 2

Hello all,

I am in the process of creating a css-only dropdown menu. This is the code I have now:

<style>
.show
	{ display: none;
}
 
.hide:focus + .show
	{display: block;
}
 
.hide:focus
	{display: none;
}
 
#roger
	{display: none;
}
 
.hide:focus ~ #roger
	{display: block;
}
</style>

<body>
<a href="#" class="hide">menu</a><a href="#" class="show">menu</A>
 
<div id="roger">items</div>
</body>

Works perfectly well in Firefox and Explorer (Win 10), but not in Edge (and probably Chromium?). The latter browser only shows the menu for a fraction of a second. Sad Does anyone have any idea why this happens? And what can I do about it? Any help would be greatly appreciated.

Thank you very much,
Roger