HTML/CSS href doesn't work when window resize - html

Question

Hi can anyone help me with this responsive navigational issue, when I resize the browser window say to 50 %, the links are there but wont click. in the bottom left of the browser the link shows but no click event. Tried using different browsers and same issue.
Here's the HTML:
<ul>
<li>Home</li>
<li>Drop
<ul class="hidden">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul></li>
</ul>
Here's the CSS :
ul {
left: 30%;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
li {
display: inline-block;
float: left;
margin-right: 1px;
}
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
font-weight: 700;
border: 2px solid #0072C6;
background-color: #000;
}
li:hover a {
background: #0072C6;
}
li:hover ul a {
background: #f3f3f3;
border: none;
color: #000000;
height: 30px;
font-weight: 300;
line-height: 30px;
}
li:hover ul a:hover {
border: 4px solid #f3f3f3;
padding: 4px;
background: #0072C6;
color: #fff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
a.clickable {
text-decoration: none;
color: #fff;
background: #0072C6;
text-align: center;
padding: 10px 0;
display: none;
font-weight: 900;
}
#media screen and (max-width : 1160px) {
ul {
position: static;
display: none;
cursor: pointer;
}
li {
margin-bottom: 1px;
}
ul li, li a {
width: 100%;
}
a.clickable {
display: block;
}
a.clickable:focus + ul {
display: block;
}
.login {
top: 0;
width: 150px;
}
}
This has been bugging me all day, So does anyone has any ideas how I can get this too work?
thanks.

Answer 1

max-width:1160px is the problem. Delete that and the nav doesn't disappear.
#media screen and (max-width : 1160px) {
Edit: you could do something like this example. I think the code is a little bit less chunky and easy to edit. Hope it helps.