更改CSS onHover選項來的onclick

我用下面的CSS：更改CSS onHover選項來的onclick

.main-navigation { 
    clear: both; 
    display: block; 
    float: left; 
    width: 100%; 
} 
.main-navigation ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 
.main-navigation li { 
    float: left; 
    position: relative; 
} 
.main-navigation a { 
    display: block; 
    text-decoration: none; 
} 
.main-navigation ul ul { 
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    display: none; 
    float: left; 
    position: absolute; 
    top: 1.5em; 
    left: 0; 
    z-index: 99999; 
} 
.main-navigation ul ul ul { 
    left: 100%; 
    top: 0; 
} 
.main-navigation ul ul a { 
    width: 200px; 
} 
.main-navigation ul ul li { 
} 
.main-navigation li:hover > a { 
} 
.main-navigation ul ul :hover > a { 
} 
.main-navigation ul ul a:hover { 
} 
.main-navigation ul li:hover > ul { 
    display: block; 
} 
.main-navigation li.current_page_item a, 
.main-navigation li.current-menu-item a { 
} 

/* Small menu */ 
.menu-toggle { 
    cursor: pointer; 
} 
.main-small-navigation .menu { 
    display: none; 
}

控制基於列表的，多層次，導航系統，在HTML爲這看起來是這樣的：https://gist.github.com/2851105。

我想知道的是什麼，我怎麼可以改變懸停事件，使菜單顯示爲點擊事件？可這甚至可以在CSS獨自完成，或因此我需要介紹一些JavaScript？

謝謝。

來源

2012-06-01 Daniel Hollands