vertical navigation help

[WindberTSA]

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.

[Paulie_D]

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.

[Paulie_D]

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

[pixelgrid]

or giving some classes could reduse the selectors to one

[Paulie_D]

Yes, I add classes to/for each level

.menu-primary

.menu-secondary

.menu-tertiary

or the like.

[WindberTSA]

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?

[WindberTSA]

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?

[Paulie_D]

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

[Paulie_D]

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

[WindberTSA]

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)

[WindberTSA]

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.

[Author]

Posts