I need a pure CSS dropdown menu, please

I used to use a pure CSS dropdown menu written by @deathshadow here a long time ago. I can't find that thread with the search function.

I need that menu again to integrate into my current project. I've a simple menu that I want to make a dropdown here:

<ul>
    <li>
        <a href="/html/setting.html" title="Setting" >
            <img src="img/gear.svg">
        </a>
    </li>
    <li>
        <input class="dropdown" type="checkbox" id="dropdown" name="dropdown"/>
        <a href="#" title="Profile">
            <img src="/html/img/user.svg">
        </a>               
        <div class="section-dropdown">
            <input class="dropdown-sub" type="checkbox" id="dropdown-sub" name="dropdown-sub"/>
            <a href="/html/signout.html" title="Sign out">
                <img src="/html/img/sign-out.svg">
            </a>
        </div>
    </li>
</ul>

Code (markup):

How to make it work?
I don't want a fancy menu. I just want the section with the sign-out.svg popped up when I click the user.svg. I don't paste the CSS here because all I do is copying from numerous tutorials I found on the internets and they are kind of a mess.

Thank you.

 

Never mind. This is from Windows Copilot and it works.
HTML:

<ul>
<li>
<a href="/html/setting.html" title="Setting" >
<img src="img/gear.svg">
</a>
</li>
<li class="dropdown">
<a href="#" title="Profile">
<img src="/html/img/user.svg">
</a>
<div class="dropdown-content">
<a href="/html/signout.html" title="Sign out">
<img src="/html/img/sign-out.svg">
</a>
</div>
</li>
</ul>

Code (markup):

CSS:

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:focus-within .dropdown-content {
display: block;
}

Code (markup):

 

Well, it turns out the dropdown links are not clickable. It was blocked by the first elements.

 

Try this: To create a simple dropdown menu with the "user.svg" image, you can use the following HTML and CSS code (Also, change the image path):
HTML:

<ul>
    <li>
        <a href="/html/setting.html" title="Setting">
            <img src="img/gear.svg">
        </a>
    </li>
    <li class="dropdown">
        <input class="dropdown-checkbox" type="checkbox" id="dropdown" name="dropdown"/>
        <label for="dropdown">
            <a href="#" title="Profile">
                <img src="/html/img/user.svg">
            </a>
        </label>         
        <div class="section-dropdown">
            <input class="dropdown-sub-checkbox" type="checkbox" id="dropdown-sub" name="dropdown-sub"/>
            <label for="dropdown-sub">
                <a href="/html/signout.html" title="Sign out">
                    <img src="/html/img/sign-out.svg">
                </a>
            </label>
        </div>
    </li>
</ul>

HTML:

CSS:

.dropdown-checkbox,
.dropdown-sub-checkbox {
    display: none;
}

.dropdown-checkbox:checked ~ .section-dropdown {
    display: block;
}

.section-dropdown {
    display: none;
}

Code (CSS):

 

Thanks. I'm able to make it worked both versions.

 

These days -- and by these days I mean the past decade and some change -- I don't do dropdowns unless the client really, really REALLY demands it. Why? They're accessibility trash, and a middle finger to users on mobile devices.

If I REALLY were to do it, they wouldn't even be drop-downs. I'd make each of them modal dialogs triggered by a parent menu item, and/or organize them in some manner to kick the drop-down trash to the curb.

That said, you've got problems. SVG icons loaded from the markup, using title to do text's job...

And yeah, don't get me started on "copilot" when it comes to inept coding.

 

Thanks for the advice. It's not really a dropdown. It's a modal. I've tried to do something like Google's. Mine is not finished yet. (image attached) It's still long way to go and I haven't code HTML and CSS for over five years. This scared me. Something like ChatGTP and Bard come in very handy.

 

Ok, if these are actually going to be modal dialogs, you can lose the checkboxes and labels altogether.

The markup would go something like this:

Inside your page <header>'s <nav>

<ul>
	<li>
		<a href="settings" class="icon_gear">
			<span>Setting</span>
		</a>
	</li><li>
		<a href="#profile" class="icon_user">
			<span>profile</span>
		</a>
	</li>
</ul>

Code (markup):

Then before any <script> before </body>

<section id="profile" class="modal">
	<a href="#" class="modalClose" hidden tabindex="-1">
		<span>Close Profile</span>
	</a>
	<div>
		<header>
			<h2>Profile</h2>
			<a href="#" class="modalClose" hidden>
				<span>Close Profile</span>
			</a>
		</header>
		<ul>
			<!-- assuming you'd have more actions here -->
			<li>
				<a href="signout" class="icon_signOut">
					<span>Sign out</span>
				</a>
			</li>
		</ul>
	</div>
<!-- #profile.modal --></section>

Code (markup):

You would then use :target to create the functionality in the CSS.

My demo template here:
https://cutcodedown.com/for_others/medium_articles/htmlCSSProperly/

From this article series:
https://medium.com/codex/what-i-mean-by-using-html-and-css-properly-part-1-of-3-44804722e33a

Uses said technique for the hamburger menu on narrow displays.

The real magic is that when the current URI hash in the address bar focuses on an ID in the document, the CSS property :target gets triggered.

 

Oh, and this older article of mine:

https://levelup.gitconnected.com/modal-dialog-driven-websites-without-javascript-16e858615780

Gives a general breakdown of the technique, though the markup used there is a bit... dated compared to my current practices.

But that's web development. One has to always be growing and improving.

Yes, even my arrogant opinionated tuchas.

 

Thanks. Works and looks promising. And thanks for the additional information.