Finalizing the navigation

We're almost done with our main navigation but still have a couple small things left to do. First, we'll fix a z-index issue, which I'll elaborate on more in a moment. Then we need to add box-shadow to the bottom of our nav bar to complete the design.

Fixing the Z index issue

First, we're going to fix a bug using the z-index property. When you hover over the MOVIES navigation item, a dropdown appears. You will notice a couple of things:

First, one of the nav items in the dropdown items gets highlighted—when it really shouldn't. Second, the nav is actually animating on top of the MOVIES navigation item.

We can slow down the animation speed to 2.5s to get an easier look at this issue:

.has-submenu:hover ul {
  display: block;
  -webkit-animation: slideDown 2.5s ease; 
  animation: slideDown 2.5s ease; 
}

This can make it easier to see that the dropdown menu is dropping down on top of the MOVIESmenu item.

That's our problem, and that's why we're ending up with one of the...