Untitled

<html>

<head>
   <title>css on click</title>

<style type="text/css">

<style>

#cssonclickswitch {
position:relative;
width: 150px;
margin:20px auto 100px;
}
#cssonclickswitch li {
width:50px;
}
#cssonclickswitch a {
display: block;
width:50px;
color: #000;
text-decoration:none;
text-align:center;
}
#cssonclickswitch a img {
border:0;
}
#cssonclickswitch a:hover,
#cssonclickswitch a:focus:hover {
color: #cff;
background:black;
}
#cssonclickswitch a:active,
#cssonclickswitch a:focus {
color:#fff;
background-color:red;
}
#cssonclickswitch a span {display: none;}
#cssonclickswitch a:active span,
#cssonclickswitch a:focus span {
display: block;
position: absolute;
top: 0;
left: 170px;
width: 50px;
color:red;
background:#fff;
}

</head>
<body>

<h1>CSS onclick</h1>
<ul id="cssonclickswitch" class="cfix">
<li><a href="#n">Wine<span><img src="wine.jpg" alt="wine" height="50" width="50"></span></a></li>
<li><a href="#n">Beer<span><img src="beer3.jpg" alt="beer" height="50" width="50"></span></a></li>
<li><a href="#n">Whisky<span><img src="whisky.jpg" alt="whisky" height="50" width="50"></span></a></li>
</ul>

</body>

</html>