テキストベースのナビゲーションがあります。「連絡先」にカーソルを合わせると、他のすべてのメニュー ボタンの上にアドレス (レイヤー) が表示されます。メールアドレスと電話番号をロールオーバー (灰色から赤色に変更) し、リンクをクリックできるようにしたいと考えています。問題: ロールアウトするとアドレスが非表示になります。これは意図されたものですが、アドレス/電話番号のリンクをクリックすることはできません。ロールアウト効果（消滅）が遅れるとうまくいくのか？CSSのみの解決策はありますか?
ページはこちら: raphaelzwyer.com/testRapha/rollover_test.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>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;}
@font-face {
font-family: 'BotonReg';
src: url('fonts/BotonReg.eot');
src: url('fonts/BotonReg.eot?#iefix') format('embedded-opentype'),
url('fonts/BotonReg.woff') format('woff'),
url('fonts/BotonReg.ttf') format('truetype'),
url('fonts/BotonReg.svg#BotonReg') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;}
@font-face {
font-family: 'BotonMed';
src: url('fonts/BotonMed.eot');
src: url('fonts/BotonMed.eot?#iefix') format('embedded-opentype'),
url('fonts/BotonMed.woff') format('woff'),
url('fonts/BotonMed.ttf') format('truetype'),
url('fonts/BotonMed.svg#BotonMed') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;}
html, body {
background-color: #FFFFFF;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
color: #a9a9a9;
height: 100%;
width: 100%;
font-family: "BotonReg", "Courier", "Courier New", "Bookman Old Style", serif;
font-size: 16px;
overflow-y: scroll;
letter-spacing: 0.065em;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-smooth: 1em;
text-shadow: 0 1px 1px rgba(255,255,255,.3);}
a {
text-decoration: none;
color: #a9a9a9;}
a:hover {
text-decoration: none;
color: #be1f2d;}
a:focus {
text-decoration: none;
color: #be1f2d;}
li {
list-style-type: none;
display: inline;}
.clear {
clear: both;}
#container {
position: relative;
top: 0px;
margin: 0px auto;
width: 860px;
min-height: 100%;
height: auto !important;
height: 100%;
border: none;}
#topmenu {
position: relative;
top: 0px;
left: 212px;
width: 660px;
height: 48px;}
.menubuttons {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttons:hover {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttonactive {
position :relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg_a.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttonactive a {
color: #be1f2d;}
#addressbox {
position: absolute;
top: 0px;
width: 548px;
left: 212px;
height: 22px;
background-image: url("images/menubg.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
letter-spacing: 0.062em;
text-align: right;
float: left;
z-index: 900;}
#addressbox:hover {
position: relative;
top: 0px;
width: 548px;;
height: 22px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
float: left;
z-index: 900;
color: #be1f2d;}
#addressboxbelow {
position: absolute;
top: 36px;
width: 548px;
left: 212px;
height: 22px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
text-align: right;
float: left;
z-index: 900;}
#contactrollover {
position: relative;
top: 0px;
margin: 0px 0px -36px 0px;
width: 100px;
left: 0px;
float: left;
z-index: 900;}
#contactrollover div {
width: 100px;
height: 50px;
float: left;}
#contactrollover a span {
display: none;
color: #a9a9a9;}
#contactrollover a {
display: block;}
#contactrollover a:hover span {
display: block;
position: absolute;
top: 0px;
left: -560px;}
.buttonspaces {
height: 36px;
list-style: none;
float: left;}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.min.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">contact<span id="addressbox"><p>917-650-9534, info@raphaelzwyer.com<br/ ></p>143 leonard street, apartment 5, brooklyn ny 11206</span></a></div></li>
</ul> <!-- end of menulist -->
</div> <!-- end of topmenu -->
</div> <!-- end of container -->
<script type="text/javascript" src="js/raphaelzwyer.js"></script>
</body>
</html>