Unexpected CSS behavior when using CSS3 transitioned navigation - html

Question

I have designed a navigation bar with 5 page 'links' that have equal width. When hovered over these reveal a drop-down with more links relevant to that page. See the navigation jsFiddle. This works perfectly.
The problem
When I placed the navigation bar into my site it doesn't work as intended. The drop-down animations lag quite a lot and there are white bars that randomly appear at the sides of the page (Windows 7 Ultimate, Chrome 24, other OS's and browsers untested). See the site here.
The white bars
Example markup
<nav id="nav">
<ul id="nav1">
<li>
<span>Games</span>
<div>
<span>All Games</span>
<span>Free Games</span>
...
</div>
</li>
...
</ul>
</nav>
Animation CSS
#nav1 > li > div {
position: absolute;
margin: 5px 0 5px -45px;
top: 0;
left: 50%;
max-height: 30px;
width: 90px;
opacity: 0;
overflow: hidden;
-webkit-transition:
width 500ms,
max-height 500ms,
opacity 200ms ease 400ms,
margin-left 500ms;
}
#nav1 > li:hover > div {
max-height: 200px;
width: 200px;
opacity: 1;
margin-left: -100px;
-webkit-transition:
width 500ms,
max-height 1s ease 500ms,
opacity 200ms,
margin-left 500ms;
}
What I tried
After unsuccessfully spending an hour looking for the problem, I decided to make a jsFiddle of my entire site to see if that would identify the problem. To my surprise it works fine in the jsFiddle.
Edit: After more testing I have determined that the problem occurs when a transition on the width or height of #nav1 > li > div completes. It is also definitely related to the transitions. Not sure if this helps.
My question
If anyone could provide some insight into the problem, it would be much appreciated. I have absolutely no clue what the cause of the problem is or how to fix it.
Note: The navigation is currently only animated in Chrome.

Answer 1

The problem is:
#mainbar
Get rid of that and see if your problems don't go away. But it's more than that. This encompasses the entire width of the DOM:
width:100%;
And it has a higher z-index than the #wapper el, which is only taking up a part of the page. The #mainbar el is overlaying the areas on the side where #wrapper isn't. But because there isn't anything there (style-wise) you get the default white of the browser bg; hence, the white bars on the side.
If you think I'm wrong, set
#mainbar{width:700px;}
You'll see your white bars have expanded to new uncovered regions. :P
Simple solution:
#wrapper{z-index:0;}
That should solve it.