Why is this gap appearing?

Head out to countryshowdown.com and pass your mouse over the links in the navbar. They work! Thing is, on my box, you see this nasty gap (see screenshot) that happens between the navbar and the links.

I'm thinking there's some ninja out there who can look at the discrepancy and go, "That's easy! All you've got to do is..."

brucegustPHP DeveloperAsked:
Who is Participating?
Tom BeckConnect With a Mentor Commented:
The prime suspect is the top:26px you have under #nav ul. The gap you show in the image appears to be about 26px thick. Also, in FF 11, Chrome 17, and Safari 5.1, if you remove the top:26px, nothing changes, the sub menus still appear in the correct place. If you take out top:26px in IE8, the sub munues move up 26px. You may just need an alternate css for IE for #nav ul
LZ1Connect With a Mentor Commented:
I checked in IE 7, 8 & 9 and I couldn't reproduce the issue. I also checked Chrome and FF and everything looks good. What version of IE are you using?
mgfranzConnect With a Mentor Commented:
First of all, you need to classify which browser this error appears in, the only browser I can see a problem with is IE8 or <.  

Second, you need to clarify exactly where the problem is occurring, I had to snoop around in order to find where the problem was.  I found it by clicking on one of the "Top 10 Most Viewed Profiles" icons.

As for a solution, it may be a simple matter of adding a z-index property to your #nav li class.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.