homepage Welcome to WebmasterWorld Guest from 54.205.197.66
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Position hover area for drop down nav
Dasegad




msg:4336147
 2:35 am on Jul 7, 2011 (gmt 0)

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




msg:4337367
 12:14 pm on Jul 9, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved