Html CSS - how do I make a show/hide button with only using an CSS and an input image?

See more:

CSS

HTML

menu

image

CSS3

navigation

This is using a drop down navigation menu. The following code does not work, but gives an idea of what im doing.

HTML

<!--Show/Hide NavMenu-->
<input id="ShowHideNavButton" type="image" src="/images/navIcons/mc-homeIcon.png" alt="ShowNav">

CSS

#ShowHideNavButton{
		display: block;
		width: 100px;
		height: 100px;
	}
	
	#navMenu:target {
  		display: block;
	}
    #navMenu{
		width: 150px;
		text-align: center;
		display: none;
	}

What should happen is, I press on the image, the nav div shows, and the opposite when I press again. can anyone please help with this?

What I have tried:

I have tried these following sites
http://stackoverflow.com/questions/17731457/hide-show-content-list-with-only-css-no-javascript-used

http://cssdeck.com/labs/css-only-showhide

https://alexcican.com/post/hide-and-show-div/