Drop shadow cut off on navigation

I'm trying to put a box-shadow on my .main-navigation. For some reason it's cut off by the top of the #page div, I've tried overflow:visible on the .main-navigation but it doesn't work. I haven't seen this happen before it seems to be related to the clear class at the beginning of the #page div
.clear:after, .clear:before, [class*=content]:after, [class*=content]:before, [class*=site]:after, [class*=site]:before {
content: '';
display: table;
}
If I disable the display: table is the css inspector then the drop shadow will appear.