Grow your CSS skills. Land your dream job.

current_page_item takes over all the drop down under its tree

  • # July 5, 2012 at 8:26 pm

    Hello every one, I am pulling my hair.

    I am working on this NAV, they want that one we select one link that the link will go blue with a nice up arrow to show where we are. Very nice.

    The problem I am having that this is the parent link, then all children get the arrow and the blue. I do not mind the blue, but the arrow should not be there. As a matter of a fact I would love to hover over the children and see a side arrow hovering. So far, I just got a headache.


    li.current_page_item a, #navlnks {background: #00608E url("images/hover.gif") bottom center no-repeat!important; opacity: 0.9; -moz-opacity: 0.9; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); zoom:1; color: #fff!important; font-weight:bold!important;}

    I tried this:


    .current_page_item a, #navlnks {background: #00608E url("images/side-hover.gif") bottom center no-repeat!important; opacity: 0.9; -moz-opacity: 0.9; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); zoom:1; color: #fff!important; font-weight:bold!important;}

    But the arrow or the blue won’t show up. If I put the LI then not only the parent takes the color and arrow, but the children too!

    Any ideas? arrr….

    # July 5, 2012 at 8:28 pm

    Could you possibly put your html and css into a codepen so we can play with it? (http://codepen.io/)

    # July 5, 2012 at 8:31 pm

    This is the link of the page. http://bit.ly/LskVbg

    # July 5, 2012 at 10:10 pm

    I’m pretty sure the problem is because you’re using .current_page_item a which selects ALL of the anchor tags beneath .current_page_item If you want to select just the top anchor tag, you want to use .current_page_item > a which selects only the anchor tags directly below .current_page_item (its children)

    # July 5, 2012 at 10:12 pm

    Here’s a tiny example I was playing with if you wanted to see.

    link: http://codepen.io/chrisxclash/pen/17/3

    # July 6, 2012 at 7:09 pm

    ChrisxClash this tough me something great! Sad, but true. There is very documentation on this type of code:


    .current_page_item > a

    If you know where I could get references for it, I will appreciated it.

    Cheers,

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".