Achieve click event using just CSS - html

Question

My question is: It is possible to achieve this example using only css? If not what would you do? Jsfiddle examples are really appreciated ;)
How to obtain also the slashes? Should i use an image or in css is possible? And the triangle that change when is clicked? I know it is possible to do it with Js maybe in css :after and :before would help me?
PS: Javascript to Hide Menu:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleMenu");
var text = document.getElementById("displayMenu");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Menu";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script>
<div class="menu-toggle"><div id="wrap"><a id="displayMenu" href="javascript:toggle();">Menu</a></div></div>
<div id="toggleMenu" style="display: none">
<div class="menu">
<ul><li> Home </li>
<li> Item </li>
</ul>
</div>
</div>

Answer 1

Usually I do something like this with images to achieve the click event with just css
<figure>
<img id="zoom" src="http://cargowire.net/Content/images/events/stackoverflow.jpg" alt="EE" />
<figcaption>
<ul>
<li>
Zoom In
</li>
<li>
Zoom Out
</li>
</ul>
</figcaption>
</figure>
and CSS:
figure { background: #e3e3e3; display: block; float: left;}
#zoom {
width: 0px;
-webkit-transition: width 1s;
}
#zoom:target {
width: 400px;
}
Check here: http://jsfiddle.net/dCTeW/ Maybe something similar can be done for menus too

Answer 2

It is perfectly possible, but only when the mouse hovers, not on click as far as I am aware. You will want to use CSS :hover states.
There is an in depth article here: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
and the demo for that article here: http://csswizardry.com/demos/css-dropdown/
If you want to use click then a small bit of jquery may help you something like:
$('.menu-item').click(function(){
$(this).find('hover-div').toggle()
})
http://api.jquery.com/toggle/
that is the Documentation for toggle which is what you need to achieve.

Answer 3

If you insist on using click in stead of hover, you could try to use :focus as suggested, but it would actually be a hack, and not considered correct use of HTML and css. Just for demonstration though, have a look at this: http://jsfiddle.net/9efMt/1/
As you can see, I use an input, with the :focus pseudo class and the + sibling selector. Nothing really wrong with that css, but putting the menu in an input is just not done!
I used jquery for the js in the, imo, correct example that is in the same fiddle. All i do is toggling a class when the menu link is clicked. It looks like this:
$('#menu2').click(function() {
$('#menu2-sub').toggleClass('active');
});
The css should be fairly straight forward.