Css Hover To Onclick Conversation

I was wondering if anyone could help me out. I'm trying to make a simple folio site, and I have this link in the top nav that when clicked on would appear a horizontal menu underne

Solution 1:

make

nav ul li:hover > ul {
    display: block;
    list-style-type: none;
    }

to

nav ul li.active > ul {
    display: block;
    list-style-type: none;
    }

Then use javascript to add a class active onClick.

What makes SO wonderful is that we can refer to similar cases easily :)

For javascript part please refer this answer .

Add/Remove class onclick with JavaScript no librarys

Solution 2:

The 'click' event cannot be listened for with css. Remove your :hover rule and add some JavaScript. In the code you provided, you don't have anything in the #menu element for the user to click on, so I added some text for the fiddle.

http://jsfiddle.net/Fc75u/

JavaScript:

var toggle = document.getElementById('menu');
var menu = document.getElementsByClassName('hide');
toggle.addEventListener('click', function(event) {
    menu[0].style.display == "block" ? menu[0].style.display = "none" : menu[0].style.display = "block";
});

jQuery:

$('#menu').click(function () {
    $('.hide').toggle();
});