Forums

mevaser

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....

ChrisxClash

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

mevaser

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

ChrisxClash

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)

ChrisxClash

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

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

mevaser

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,

treehouse : what would you like to learn today?

Forums

current_page_item takes over all the drop down under its tree