menu still active when menu bar isn't open.

[Doubleshot_84]

I'm working on a responsive website. One part of it is the navigation bar turning into a hamburger menu bar once the page decreases to 800px. Which is working wonderfully.

The issue that I'm having is that once the navigation bar turns into the hamburger menu, the links in the drop down menu are hidden put still active and clickable links. The Css is from the responsive.css file. I'm completely self taught, and at my wits in. I hope someone out there can point me in the right direction.

I attached sample code so you guys can see the issue for yourself.

@media (max-width:800px){	header a.hamburger{ display: block;}	header nav{		position: absolute;		opacity: 0;		width: 95%;		top: 95px;		right: auto;		left: auto;		height:auto;		float: center;		z-index: 20;		overflow: hidden;		background: #fff;		border-top: 5px solid #bfd9f2;		-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);		-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);		box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);}	header nav.active{		opacity: 1;}	header nav ul{		display: block;		width: 100%;		text-align: center;		margin-top: 0;}	header nav a{		text-decoration: none;		text-align: center;		display: inline;		color:#808080;		list-style: none;}	header nav ul li a{		display: block;		padding: 25px 0;		border-bottom: 1px solid #f2f3f3;		transition: background .2s linear;		-webkit-transition: background .2s linear;		-moz-transition: background .2s linear;		-o-transition: background .2s linear;}	header nav ul li a:active{		background: #f2f3f3;}	header nav ul li a,{		color: #1c3655;}}

sample code.zip

[dsonesuk]

Because all you have done is make the menu invisible by using opacity:0; you either have to use display: none; or use left: -9999em; to place it outside browser window area.