sigh… can’t target child ul

[mdrd88]

Here is my code pen

http://codepen.io/seraphzz/pen/CAuie

I am trying to target the sub list so it will slidedown. Thanks for the help!

[Senff]

3 things you should do to make it work:

– select jQuery in your codepen — it’s currently not loading any JS library
– remove the submenu hover rule from your CSS
– remove the width:10px; from your submenu LIs

http://codepen.io/senff/pen/kmpqg

[mdrd88]

Is there a way I can have it fallback to css if javascript is disabled?

[Jozsef K.]

You add from javascript a class to #nav (collapseMenu)

#nav:not('.collapseMenu') li { height:0; overflow:hidden; transition:height .1s }

#nav:not('.collapseMenu') li:hover { height:50px; transition:height .1s }

If javascript is disabled the menu does not have the collapseMenu class, so the css code will be activated.This doesn’t work in IE.

Update: Sorry, instead of li you put .sub-level and a greater height.

[David_Leitch]

I was playing around with this as well and [this](http://codepen.io/David_Leitch/pen/ctAoI “http://codepen.io/David_Leitch/pen/ctAoI”) is what I came up with. As far as I can see, it should work with both javascript enabled/disabled, without the need for extra ids/classes.

[Senff]

Give the LI a class (‘fallback’) in the HTML.
Give the hover state under the fallback class in the CSS.

When JS is enabled, remove the fallback class. That way, the hover through CSS won’t be applied. And with JS not enabled, the hover through CSS will work fine.

See http://codepen.io/senff/pen/kmpqg

[Author]

Posts