Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Milan Milosevic
Milan Milosevic
6,647 Points

Navigation - how to make <li>s appear only after clickig on their parrent <li>

<ul> <li><a href="#" class="main">Main</a> <ul class="sub"> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> </ul> </li> </ul>

My question is, how can i make that this First and Second items appear only after clicking on Main, don't want them to be shown all the time. So, Main link will not take to any other page, only show these sub-options.

Thanks

1 Answer

Patryk Nowak
Patryk Nowak
14,102 Points
Patryk Nowak
Patryk Nowak
14,102 Points

I wrote two solutions, with CSS and with Javascript:

This is what you were thinking about?

Milan Milosevic
Milan Milosevic
6,647 Points

That is exactly what I asked about, but stil not working here :/ Now it is not showing those two li-s at all, not even on hover ..

Patryk Nowak
Patryk Nowak
14,102 Points
Patryk Nowak
Patryk Nowak
14,102 Points

Put your code into codepen.io , so I can help you

Milan Milosevic
Milan Milosevic
6,647 Points

Uh, I've made it! :) Thank you very much for your unselfish help, means a lot!

Milan Milosevic
Milan Milosevic
6,647 Points

can I ask u a few more things? :)