How to style a drop-down navigation link

[Carla the Moose]

I'm not sure how to word this, but I have a navigation drop down menu that is called Animals. When you hover over Animals, you can see the pages assigned to that category. Even though Animals isn't a link, is there a way to make it change colors when hovering and also when I am on one of the pages in the menu?

I'm using the general Genesis theme.

[jbergen]

That's certainly possible. The specific CSS will depend on the HTML structure of your menus, but here's a general guideline:

1) For making the "Animals" menu item change colors on hover, you'll need something like this:

.genesis-nav-menu > li.menu-item > a:hover {
	color: ... ;
}

(Note that, if it didn't have submenus, you could also add this selector: .genesis-nav-menu .current-menu-item > a to keep it that color when selected.)

2) For keeping the "Animals" menu item the "selected" color when you're on one of its submenus, you'll need:

.genesis-nav-menu .current-menu-ancestor > a {
	color: ... ;
}

3) Finally, for keeping the "Animals" menu the "selected" color when your just hovering over one of its submenus (before you've actually selected it), here is a link to a tutorial that will help you do that.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[Carla the Moose]

Thank you so much for your wonderful help. It works perfectly!!

I haven't used drop down sub menus before. I'm so glad they're easy to work with. :o)

The Animals word is a link to an Animals page. I just assumed I was supposed to create a page for Animals to show up in the navigation bar. But I'm not using it as a page with content; it's just the title of the sub menu. I'm not sure how to prevent Animals from being a link. Do you have any suggestions?

Thank you!

[jbergen]

Happy to help! To avoid having a blank Animals page, you can just create a menu (under Appearance -> Menus) that is a link. The URL will be # and the link text will be Animals. That way, nothing will happen when somebody clicks on Animals.

Jamie

---

Jamie @ Ladebug Studios

[Carla the Moose]

Oh, wow. I had no clue that simply entering # would do that. Thank you!!!

:o)

[Author]

Posts