CSS hovering div link

I am using the following css to create a popout menu with information when a user hovers over a particular link. How can I modify the follow code so 开发者_JAVA技巧the user could click on a link within the span? As of right now the second the mouse moves off the original link, the div disappears.

a:hover {
position: relative;
}

a span {
display: none;
}

a:hover span {
color:#006699;
display: block;
position: absolute;
width:190px;
height:12px;
top: -15px; 
left: 30px;
padding: 5px;  
z-index: 100;
}

<a href=email.php>email<span>text</span></a>

---

That is not valid HTML you have there - block level p tags cannot be contained in inline a and span tags. And even if you're using HTML5, which changed the rules about which elements can be inside which other elements, you still can't have anchors inside anchors - it just doesn't make sense.

What you can do, instead, is to use adjacent sibling selectors to do the job, by having the popup element appear next to the anchor in the document markup instead of inside it.

However, it's recommended that you use JavaScript to control the behavioural elements of your site - JavaScript also offers greater control over how the popup behaves, and is generally better suited for this.