I have a text-rollover where an address-block appears on rollover. The address-block itself has two independent rollover links. Here it is (I isolated the relevant top menu for simplification reasons). Please roll over the "contact" menu to see what I mean:
The email link works fine but I can't figure out how to make the phone link independent from the email link so that if you rollover the email link it leeds you to your email browser and if you rollover the phone line it dials the respective phone number (with href="tel:917-650...." etc.). If I have both links within their respective paragraph tags the contact rollover doesn't work anymore. Looks like the link tag needs to be wrapped around the address-block for the contact-rollover work, and nested links won't be the solution either. How can I resolve that?
The 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:[email protected]" target="_new">contact
<span id="addressbox">
<p id="email">[email protected]</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>
The relevant 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;}
You're wrapping everything in your email link. Try this instead - DEMO
HTML
<li id="contactrollover">
<div class="menubuttons">
<a href="mailto:[email protected]" target="_new">contact</a>
<span id="addressbox">
<p id="email"><a href="mailto:[email protected]" target="_new">[email protected]</a></p>
<p id="phone"><a href="tel:917-650-9534" target="_new">917-650-9534</a></p>
<p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
</span>
</div> <!-- end of menubuttons -->
</li> <!-- end of contactrollover -->
CSS
#contactrollover a+span {
display: none;
}
#contactrollover a {
display: block;
}
#contactrollover a:hover+span,
#contactrollover span:hover {
display: block;
position: absolute;
top: 0px;
left: -560px;
padding-right: 12px;
}