-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering CSS
By :

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.
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 MOVIES
menu item.
That's our problem, and that's why we're ending up with one of the...