Treehouse: Grow your CSS skills. Land your dream job.

Show a div if nav item is selected

  • # March 5, 2012 at 8:28 am

    I want to show a little message underneath a nav item if its currently selected. I have been doing some research on how to do this and haven’t gotten very far. I know I have seen this done in css3 and in jquery. i know I posted this in the javascript forum but I would like to know how to do it both ways. Here is a screen shot of what i want to accomplish I already have a ul for the nav, with a class of .current for the selected nav item. Now i just need to know what the best way to hide the information for the unselected nav item. I played around with some jquery, using a if statement .hasClass and .removeClass functions with no luck. I just need to be pointed in the right direction. Thanks for any help.

    # March 5, 2012 at 11:29 am

    all css

    ul li {

    ul li a span {


    ​ul li a span.current {



    This isn’t pretty but it should accomplish what you are trying or at least get you moving in the right direction.

    # March 5, 2012 at 6:13 pm

    Slight change on Schmotty’s work

    # March 5, 2012 at 6:21 pm

    Here is a pure CSS version for you:

    If you have any questions feel free to ask!

    # March 5, 2012 at 7:32 pm

    Thanks guys for the information. Joshuan thats exactly what I needed. Much appreciated

    # March 5, 2012 at 7:35 pm

    No worries at all! Feel free to use/abuse that code too.

    # May 12, 2013 at 6:57 pm

    How do you make this a vertical menu?

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

You must be logged in to reply to this topic.