SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question When Mouse Leaves Div Area, Links Take on Parent Links' Style

    Hello all,

    This pertains to the drop-down menu on the World Review Group home page. After I coded the transition delay for the drop-down menu for when the mouse leaves the #pMenu div area and when that occurs, the child links take on the styles of the parent list items/links.

    The cause may have to be due somewhat to the following CSS target on the #pMenu drop-down:
    Code:
    #pMenu li:hover li a{
    I think that's it, but I don't know what to change it to. Any suggestions?

    -Tyler

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    In your CSS, you have only defined styles for your drop down list on hover, which is a problem now that you are using transitions. Change this block of CSS code:

    Code:
    #pMenu li:hover li a{
           color:#039;
    	   text-decoration:underline;
    	   text-shadow:none;
           background:none;
           filter:none;
           border:none;
           font-size:12px;
           display:inline;
    }
    #pMenu li:hover li a:hover, #pMenu li:hover li a:focus, #pMenu li:hover li a:active{
    	text-decoration:none;
    	color:#069;
    }
    
    #pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
    	color:#0F0;
    	background:none;
    	filter:none;
    	border:none;
    }
    to this:

    Code:
    #pMenu li li a, #pMenu li:hover li a{
           color:#039;
    	   text-decoration:underline;
    	   text-shadow:none;
           background:none;
           filter:none;
           border:none;
           font-size:12px;
           display:inline;
    }
    #pMenu li li a:hover, #pMenu li li a:focus, #pMenu li li a:active,
    #pMenu li:hover li a:hover, #pMenu li:hover li a:focus, #pMenu li:hover li a:active{
    	text-decoration:none;
    	color:#069;
    }
    
    #pMenu div a, #pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
    	color:#0F0;
    	background:none;
    	filter:none;
    	border:none;
    }
    
    #pMenu div h2 a {color: #339; text-decoration: underline;}

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, these changes are necessary because the styles are unaccounted for when the main-level list-items lose their :hover states.

    The timer function does create a usability issue, though, which I don't if there is a way this can be fixed. When you browse through the drop-down menus from right-to-left, one menu will overlap the next one as it goes through its transition delay time to remove its visibility. Can CSS be used to stop this?

    You may have already known this was going to happen, but it may be worth it to just remove the transition delay after all.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •