Home/ Questions/Q 8549029
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T13:37:55+00:00

I have a text-rollover where an address-block appears on rollover. The address-block itself has

  • 0

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:

here’s the example page

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: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>

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;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re wrapping everything in your email link. Try this instead – DEMO

    HTML

    <li id="contactrollover">
    <div class="menubuttons">
        <a href="mailto:info@raphaelzwyer.com" target="_new">contact</a>
        <span id="addressbox">
            <p id="email"><a href="mailto:info@raphaelzwyer.com" target="_new">info@raphaelzwyer.com</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;
}
    • 0