Evento css para desaparecer submenus quando clicados

Fiz um menu css horizontal com submenus na vertical!

Mas quando acesso algum link do sub-menu ele continua em foco até que o mouse saia da área de sub-menus!

Atrapalhando a visualização do conteúdo acessado.

Estou precisando de um evento que faça sumir os submenus quando algum link de sub-menu for clicado!

Alguém pode me ajudar?

Aqui está meu código!

//--------------------------------------------------------------------------------------------------------------------------------//<style type="text/css"><!--#nav, #nav ul {	list-style-type: none; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;}#nav a {	display: block;	font-family: Arial, Helvetica, sans-serif; font-size: 10px;	color: #FFFFFF; text-decoration: none; margin: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;	height: 17px;	width: 76px;	text-align: center;}#nav li {	float: left;	padding: 0;	width: 76px;}#nav li ul {	position: absolute;	left: -999em;	height: 17px;	width: 76px;	w\idth: 76px;	margin: 0;}#nav li li {	padding-right: 0px;	width: 0px;}#nav li ul a {	width: 76px;	w\idth: 76px;}#nav li ul ul {	margin: 0 0 0 0;}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {	left: auto;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto;}#nav li:hover, #nav li.sfhover {	font-family: Arial, Helvetica, sans-serif; font-size: 10px;	font-weight: bold;	background: none;}#content {	clear: left;}#content a {	background: none;}#content a:hover {	font-family: Arial, Helvetica, sans-serif; font-size: 9px;	font-weight: bold;	text-decoration: none;}#scaffolding {	height: 76px;	border-width: 0 0 0 0;	margin: 0 0 0 0;}#scaffolding a {	text-decoration: none;	display: block;	height: 84px;}#scaffolding a:hover {	background-position: none;}--></style><script type="text/javascript"><!--//--><![CDATA[//><!--sfHover = function() {	var sfEls = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); }	}}if (window.attachEvent) window.attachEvent("onload", sfHover);//--><!]]></script>