I have text-based navigation. Rolling over "contact" displays the address (layer) over all the other menu buttons. I would like the email address and the phone number to be rollovers (changing color from grey to red) and as well clickable links. Problem: roll-out makes the address disappear, which is intended but it's impossible to click address/phone links. Would it work if the roll-out effect (disappearing) would be delayed? Is there a CSS only solution?

Here's the page:
http://raphaelzwyer.com/testRapha/rollover_test.html

HTML Code:
<!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>