Salve a tutti, ho un problema abbastanza semplice da spiegare e probabilmente banale da risolvere...
In pratica con il codice seguente l'ultimo link "invade" l'area del penultimo, e di conseguenza il penultimo link è cliccabile solo per la sua "metà superiore". Mentre se sposto il cursore nella "metà inferiore" del penultimo link è come se stessi cliccando sull'ultimo.

html
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Title</title>
	<link rel="stylesheet" href="prova.css" type="text/css">
</head>
<body>
<div class="menu">
	<div id="menu1" >abcdefgh</div> 
	<div id="menu2" >ijklmno</div>
	<div id="menu3" >pqrstu</div> 
	<div id="menu4" >vwxyz</div>
</div>
</body>
</html>
e CSS
codice:
*{
	margin: 0;
	padding: 0;	
}
a
{
	text-decoration:none;
}
.menu
{
	font-family: Arial ;
	font-size: 30px;
	text-align: right;
	float: right;
	margin-right: 50px;
}
#menu1
{
	font-size: 36px ;
	height: 30px ;
	margin-right: 4px ;
}
#menu2
{
	font-size: 38px ;
	height: 34px ;
}
#menu3
{
	font-size: 34px ;
	height: 19px ;
	margin-right: 14px ;
	margin-bottom: 0px ;
}
#menu4
{
	font-size: 52px ;
	height: 42px ;
	margin-bottom: 6px ;
}
Ho già provato a modificare "margin" e "line-height" del tag 'a' dentro al 'div' #menu4, ma non ne ho ricavato niente di utile. Il risultato finale dovrebbe essere visivamente uguale.
Come posso risolvere ?

Grazie in anticipo