Grow your CSS skills. Land your dream job.

vertical navigation help

  • # April 4, 2013 at 9:24 pm

    Hey guys,

    I’m tweaking a new navigation to put on the site.

    This is the code pen: [vertical navigation…](http://cdpn.io/vripE “code pen”)

    When I scroll over the smaller list items like the `nav ul li ul li`, I want the text to change from the white to the blue I have on the ` nav ul li` list items.

    I kept trying to adjust different elements but I cannot seem to create the hover effect on those smaller list items.

    # April 5, 2013 at 5:01 am

    This

    nav li a:hover {
    color: #06acff;
    }

    is fighting with this

    nav ul li ul li a {
    color: #fff !important;
    }

    You really shouldn’t need to be using `important`. Just remove that line and it’ll be fine.

    # April 5, 2013 at 7:15 am

    ..and to be honest this is way too long as a selector

    nav ul li ul li a

    this is better

    nav ul ul a

    …however you might want to look into some other selectors that will help you in proper selections.

    http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

    # April 5, 2013 at 9:14 am

    or giving some classes could reduse the selectors to one

    # April 5, 2013 at 9:41 am

    Yes, I add classes to/for each level

    .menu-primary

    .menu-secondary

    .menu-tertiary

    or the like.

    # April 6, 2013 at 9:36 am

    okay Thanks! The [Vertical Menu](http://cdpn.io/vripE “Vertical Menu”) now has the hover effect I was looking for. I changed that selector to be shorter.

    To make a class for each level, I would give the `ul` the class that corresponds? I don’t know if I really understand how to do it that way..

    Questions: Why does the length of the selector, err, matter?

    The arrow that appears above the drop down portion, how can I change the color of it?

    And I want the background color of the drop down portion before the hover effect to be a dark grey, how can I change the color of it?

    # April 6, 2013 at 9:37 am

    Oh.. When you click that link, it shows the menu as being all blue, but when I edit it on code pen, it is the black color that I want. Do you know why it isn’t coming up that way on the link posted here?

    # April 6, 2013 at 11:58 am

    Specificity: http://css-tricks.com/specifics-on-css-specificity/

    # April 6, 2013 at 12:01 pm

    >The arrow that appears above the drop down portion, how can I change the color of it?

    You made it…surely you know how to change it?

    Plus it’s actually commented in your CSS!

    # April 6, 2013 at 10:07 pm

    I didn’t make this menu bar, courtesy of sahil popli. … I do not know enough to create this myself.. I have been editing it a bunch for my purposes. The last time you commented on one of my posts, you had mentioned that you thought a vertical menu would be more realistic on my site. So, since then, I have been searching for a menu bar that I could mimick on my website.

    This website is due in my high school competition on Monday, so I have been rushing to try and finish some changes I wanted to make before it is due. I wish I knew more about CSS and developing websites, but I am very new at this. Only been dabbling for about a year and a half.( Created about 5 okayish websites)

    # April 6, 2013 at 10:20 pm

    I figured out how to change the pointer tip.!

    But I still would like to change the color of the `nav ul li ul li` elements to dark grey. (The elements that drop down).

    And I want to figure out how to add another list item; so that when I click on, say windber tsa>history> I want more items to slide out to the right.

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

You must be logged in to reply to this topic.

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