Creating Drop Down Menu on click CSS

Question

I\'m required to build a menu with 5 options, upon clicking a certain one a new sub menu is to appear. I have absolutely no idea how to do this.

Answer 1

In fact, there is a possibility to get this working with pure CSS and browser element behaviour, using the checkbox hack, however at the time of writing this, it is pushing what SHOULD be done with CSS vs what COULD be done with CSS. Also It can cause some pretty terrible semantic code (after all there is a reason it is usually stated as the checkbox HACK).

Having said that, you could use it if you only have requirements for modern browsers, giving limited functionality to others and I have myself used this in production code, on an isolated chrome only project and it is pretty fun to play with.

Here is a link to read more on it:

http://css-tricks.com/the-checkbox-hack/

But again to stress, like others have on here already, that functional behaviour should really be done via JavaScript. Unless you actually want a hover based menu solution then that is a different question all together!