ロールオーバー時にアドレスブロックが表示されるテキストロールオーバーがあります。アドレスブロック自体には、2つの独立したロールオーバーリンクがあります。ここにあります（簡略化の理由から、関連するトップメニューを分離しました）。「お問い合わせ」メニューをロールオーバーして、意味を確認してください。
電子メールリンクは正常に機能しますが、電話リンクを電子メールリンクから独立させる方法がわかりません。そのため、電子メールリンクをロールオーバーすると、電子メールブラウザに移動し、電話回線をロールオーバーすると、それぞれの電話にダイヤルします。番号（href = "tel：917-650 ...."など）。それぞれの段落タグ内に両方のリンクがある場合、連絡先のロールオーバーは機能しなくなります。連絡先のロールオーバー作業を行うには、リンクタグをアドレスブロックにラップする必要があるようです。ネストされたリンクも解決策にはなりません。どうすればそれを解決できますか？
HTML：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>raphaelzwyer</title>
<link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/>
<script type="text/javascript" src="js/raphaelzwyerFive.js"></script>
</head>
<body onload="MM_preloadImages('images/menubg_b.png','images/th_att_b.png','images/th_bmw_b.png','images/th_directv_b.png','images/th_giostra_b.png')">
<div id="container">
<div id="topmenu">
<ul id="menulist">
<li class="menubuttonactive"><a href="portfolio.html">portfolio</a></li>
<li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
<li class="menubuttons"><a href="about.html">about</a></li>
<li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
<li class="menubuttons"><a href="downloads/raphael_zwyer_CV.pdf" target="_new">resume</a></li>
<li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
<li id="contactrollover">
<div class="menubuttons">
<a href="mailto:info@raphaelzwyer.com" target="_new">contact
<span id="addressbox">
<p id="email">info@raphaelzwyer.com</p>
<p id="phone">917-650-9534</p>
<p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
</span>
</a>
</div> <!-- end of menubuttons -->
</li> <!-- end of contactrollover -->
</ul> <!-- end of menulist -->
</div> <!-- end of topmenu -->
</div> <!-- end of header -->
</body>
</html>
関連するCSS：
.menubuttons {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("../images/menubg.png");
background-repeat: repeat-x;
padding-top: 10px;
float: left;}
.menubuttons:hover {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("../images/menubg_h.png");
background-repeat: repeat-x;
padding-top: 10px;
float: left;}
.menubuttonactive {
position :relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("../images/menubg_a.png");
background-repeat: repeat-x;
padding-top: 10px;
float: left;}
.menubuttonactive a {
color: #be1f2d;}
.buttonspaces {
height: 36px;
list-style: none;
float: left;}
#contactrollover {
position: relative;
top: 0px;
margin-bottom: -36px;
width: 100px;
left: 0px;
float: left;}
#contactrollover div {
width: 100px;
height: 50px;
float: left;}
#contactrollover a span {
display: none;}
#contactrollover a {
display: block;}
#contactrollover a:hover span {
display: block;
position: absolute;
top: 0px;
left: -560px;
padding-right: 12px;}
#addressbox {
position: absolute;
top: 0px;
width: 548px;
left: 212px;
height: 60px;
background-image: url("../images/menubg.png");
background-repeat: repeat-x;
padding-top: 10px;
letter-spacing: 0.062em;
text-align: right;
float: left;
z-index: 800;
color: #a9a9a9;
background-color: white;}
#addressbox:hover {
float: left;
z-index: 900;}
#phone:hover, #email:hover {
color: #be1f2d;}
#address {
position: relative;
width: 548px;;
height: 22px;
float: left;
z-index: 900;
color: #a9a9a9;}