One media query breakpoint disables links. Others are working perfectly

Question

today I stumbled upon a very weird problem. I've got a site with responsive layout which uses @media queries and presumably there are breakpoints. One of them (or one of the resolutions, as a newbie I'm not so sure about the terminology) disables links in navigation bar, which I really can't understand, because between other breakpoints everything works perfectly well.

So here's the web - it occurs between 831px and 1025px

Both HTML and CSS are valid. It occurs in all major browser, paradoxically except IE9 in which it works, but just partially. I've tried to google it, tried searching here, but I don't even have an idea what I should be looking for.

What's even more weird is that there are almost no differences between particular queries on this class. It differs mostly in just numerical values. And I've tried changing them - well I've tried just everything I could've imagine, but I must admit this is my first web and I have no experience whatsoever, so maybe I'm just missing something fundamental.

Oh, and here's a snippet of the code of the afflicted element

@media screen and (min-width: 831px) and (max-width: 1025px){
.topMenuNav ul li a{
  display: table-cell;
  padding: 0 0.9em;
  vertical-align: middle;
  height: 1.5em;
  background-color: #8fbe00;
  font-size: 1.2em;
  color: #fbfbfb;
  text-decoration: none;
}
}

/* same element, different query, almost no difference - working */
@media screen and (min-width: 1026px){
.topMenuNav ul li a{
  display: table-cell;
   padding: 0 0.9em;
  vertical-align: middle;
  height: 1.7em;
  background-color: #8fbe00;
  font-size: 1.4em;
  color: #fbfbfb;
  text-decoration: none;
}
}

Answer 1

this is not really the best answer that you want but it can solve your current problem,

.topMenuNav ul li a{ position:relative; z-index:999} /* add this before end `tag` of @media screen and (min-width: 831px) and (max-width: 1025px){} */

just like below:

@media screen and (min-width: 831px) and (max-width: 1025px){
.topMenuNav ul li a{
  display: table-cell;
  padding: 0 0.9em;
  vertical-align: middle;
  height: 1.5em;
  background-color: #8fbe00;
  font-size: 1.2em;
  color: #fbfbfb;
  text-decoration: none;
}
.topMenuNav ul li a{ position:relative; z-index:999}

}

working demo

Answer 2

Actually, your media queries are ok, the problem is the way you positioned your elements. Let's see: you defined the following structure in your HTML/CSS:

div.TopMenu
    div.TopMenuNav
    div.TopMenuSearch

You just need to add the float property . In this case put this in CSS (outside media queries):

    .TopMenuNav{
    /* your styles plus : */
    float: left}

    .TopMenuSearch{
    /* your styles plus : */
    float: right; /* or left if you want the search right after navigation */}

For semantic reasons, I suggest you to change the div.TopMenuNav and use a nav tag :

div.TopMenu
    nav.TopMenuNav
    div.TopMenuSearch

Sorry if I was too didatic, but you said you are new to this. Good Luck.