CSS Drop Down Menu

[jcode]

Hi, I’m working on a drop down menu based on a nice design I found here, but I have made numerous edits. I’d specifically like to get the Parent UL LI to turn back to white while I’m hovering over the Child UL LI (the UL UL LI), but I’m stumped. Any suggestions? I also had to “force” some styling with a few !important tags — I’d love to get rid of them.

Here’s the JS Fiddle.

[Paulie_D]

If you make a Codepen.io demo we can take a look.

[jcode]

Sure thing, here it is in Codepen.

[Paulie_D]

Firstly, there is no selector that will change the styles of a parent based on a child.

So…my first thought is to switch the background changes to the links…rather than the list item that wraps the link.

http://codepen.io/Paulie-D/pen/vOxeQR

[jcode]

Thanks! That solved the immediate problem. Any thoughts on eliminating the !important declarations?

[Paulie_D]

Figure out why you used them in the first place.

It’s usually because you have specificity problems…a declaration further up (usually) is too broad and so you need to narrow it down by making it more specific to target only the elements you want.

http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

[jcode]

Thanks again for the great advice. I little reordering on the declarations allowed me to eliminate the !important tags.

Now, I thought it’d be fun to add a transition effect to the drop down on hover. I tried to add a transition declaration, but it only had an effect on colors — any suggestions on how to get the drop down to expand and collapse up and down on hover?

[Paulie_D]

That’s more of a javascript thing.

You’re using the display property to hide/show the submenus and that can’t be animated.

I’m not saying it can’t be done with CSS but probably not with what you have there without a great deal of re-tooling.

[jcode]

I think it’s possible because I found this.

Just need to figure out how to strip the css and move into my menu

If the whole menu has to be reworked then so be it, any suggestions are greatly appreciated.

[Paulie_D]

That link doesn’t work for me at all.

[jcode]

It should work, maybe try it again : )

[Author]

Posts