我有一个文本翻转，其中一个地址块出现在翻转上。地址块本身有两个独立的翻转链路。在这里（为了简化，我隔离了相关的顶部菜单）。请滚动“联系人”菜单以了解我的意思：
电子邮件链接工作正常，但我不知道如何使电话链接独立于电子邮件链接，以便如果您翻转电子邮件链接，它会将您引导到您的电子邮件浏览器，如果您翻转电话线，它会拨打相应的电话号码（带有 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;}