Position hover area for drop down nav

[Dasegad]

Hello all,

I am currently building out a drop down for one of the links in my main nav.

What I'm trying to have happen is that when you hover over the link "cast and crew" in the main nav, a drop down pops up that then lists out the names of all the cast and crew that you can then click on and go to their profile page.

Anyway, I've been successful in making it so that the drop down is all in the right position and that it is invisible when you are not hovering, and then have it pop up when you are hovering.

The issue I am having is that the drown down will pop up if you hover the mouse in the space where the pop up ends up falling when it is displaying. (so for example, if when the drop down is displaying it may hang an inch below the main nav. If you hover the mouse anywhere in that inch below the main nav the drop down will show up)

What I want to have happen is to make it so that the drop down only shows up when you hover over the cast and crew link in the main nav. (does this make sense?)


Here is the CSS I am using:

#castandcrewnav{position: absolute; top: 10px; left: 478px;}
#castandcrewnav li{display: block;}
#castandcrewnav a{text-decoration: none; padding:0px;color:white; font-size:17px; font-family:sans-serif; font-weight: bold;}
#castandcrewnav:hover ul {visibility:visible}
#castandcrewnav ul{visibility: hidden; position: relative; left: -38px; top: 19px; background:url(DropDownBack.jpeg); background-repeat:no-repeat; background-size: 210px 185px; background-position: 35px; font-family: sans-serif; font-size: 18px; z-index: 100;}

[alt131]

Hi Dasegad, Your explanation made sense to me, and if I understand correctly, you want to stop the :hover effect on li#castandcrewnav ul.

The issue I am having is that the drown down will pop up if you hover the mouse in the space where the pop up ends up falling when it is displaying

Recalling that the visibility set on the second level ul does not remove the element from the document flow, just makes it visible/hidden for a visual user. Also recall the li set to display the second level ul on :hover contains the dropdown ul, which means that :hover is inherited by the child ul.

In combination, that means the code orders the user agent to position the second level dropdown where it is to appear when hovered. It also orders the user agent to make the second level dropdown visible when the li (and the child ul) are hovered. That means the code orders the user agent to show/hide the dropdown when the area occupied by the child ul is hovered - even though the second level dropdown isn't actually visible to a visual user.

So if I understand correctly, you don't want the second level ul to be offset left:-38px; top: 19px;. What you want is the second level ul to display in the offset position when the li is hovered. Achieve that by moving the offsets from #castandcrewnav ul to #castandcrewnav:hover ul.