Открытие меню при клике
 

Помогите с меню пожалуйста. Нужно, чтобы при клике открывалось submenu, а не при наведении.

<style>
.menu-selector {
float: left;
margin-left: 110px;
}
.menu li {
background: url(img/menu-border.png) no-repeat right 25px;
float: left;
margin: 23px 0 0;
padding: 19px 18px 27px;
}
.menu li:last-child {
background: transparent;
}
.menu li a {
font: bold 17px 'Calibri', Arial, sans-serif;
color: #575757;
border-bottom: 1px solid transparent;
display: block;
}
.menu > li > a:hover {
color: #e03035;
border-bottom: 1px solid #e03035;
}
.menu > li:first-child > a {
width: 32px;
height: 22px;
background: url(menu-icon.png) no-repeat center;
border: 0;
}

.menu > li.hasSubMenu:hover {
background: #818487 url(img/menu-item-top.png) no-repeat center 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-size: contain;
}
.menu > li.hasSubMenu:hover > a {
color: #fff;
border: none;
}
.submenu.extended {
display: none;
position: absolute;
top: 89px;
left: 55px;
z-index: 99;
}
.sub-menu-right .submenu.extended {
left: auto;
right: 0;
}
.submenu.extended .submenu-selector {
background: #818487 url(img/submenu-extended.png) no-repeat 0 bottom;
padding: 49px 55px 45px;
border-radius: 15px;
}
.menu li:hover .submenu {
display: block;
}
.submenu .space {
height: 0;
}
.submenu.extended .col {
float: left;
margin-right: 58px;
}
.submenu.extended .col:last-child {
margin-right: 0;
}
.submenu.extended h3, .submenu.extended a {
color: #fff;
font: 22px 'Calibri', Arial, sans-serif;
margin-bottom: 23px;
}
.submenu.extended a {
font-size: 16px;
margin-bottom: 5px;
position: relative;
}
.submenu.extended a img {
position: absolute;
top: 0;
left: -33px;
}
.submenu.extended a:hover {
text-decoration: underline;
}


.menu > li:first-child.hasSubMenu .submenu.extended .col {
width: 215px;
}

.menu > li:first-child.hasSubMenu:hover {
background-color: #fff;
background-size: initial;
}
.menu > li:first-child.hasSubMenu .submenu.extended .submenu-selector {
background: #fff;
padding-top: 35px;
box-shadow: 0 5px 14px -4px #000;
}

.menu > li:first-child.hasSubMenu .submenu.extended a img {
display: none;
}

.menu > li:first-child.hasSubMenu .submenu.extended h3, .menu > li:first-child.hasSubMenu .submenu.extended a {
color: #555;
font: 14px/15px 'Calibri', Arial, sans-serif;
}
.menu > li:first-child.hasSubMenu .submenu.extended a:hover {
color: #e43136;
}
.menu > li:first-child.hasSubMenu .submenu.extended h2 {
color: #555;
font: bold 16px 'Calibri', Arial, sans-serif;
margin-bottom: 26px;
text-transform: uppercase;
}
.menu > li:first-child.hasSubMenu .submenu.extended h3 {
font-weight: bold;
margin-top: 17px;
margin-bottom: 17px;
}

.menu > li:first-child.hasSubMenu .submenu.extended .col.no-title {
padding-top: 29px;
}

.menu > li:first-child.hasSubMenu .submenu.extended .col.r-border {
border-right: 1px solid #e4e4e4;
}
</style>


<ul class="menu-selector menu">
<li class="hasSubMenu">
<a href="./test_files/test.html" onclick="return false;">link</a>
<div class="submenu extended">
text submenu
</div>
</li>
</ul>

Это делается на js.

можно также на css, только в данном примере не могу разобраться как.

<style>
.onclick-menu {
position: relative;
display: inline-block;
}
.onclick-menu:before {
content: "click me!";
}
.onclick-menu:focus .onclick-menu-content {
display: block;
}
.onclick-menu-content {
position: absolute;
z-index: 1;

display: none;
}
</style>
<div tabindex="0" class="onclick-menu">
<ul class="onclick-menu-content">
<li><button onclick="alert('click 1')">Look, mom</button></li>
<li><button onclick="alert('click 2')">no JavaScript!</button></li>
<li><button onclick="alert('click 3')">Pretty nice, right?</button></li>
</ul>
</div>

Хм, дать tabindex родителю в голову не приходило )
Ну да, можно и так. Не совсем получится так как с js, но думаю решение годное )

Нашел в загашнике :)
http://jsfiddle.net/vlasenkofedor/59T3Z/