CSS
#disjointedText {
position:relative;
margin:2em auto;
list-style:none;
}
#disjointedText dd {
padding:0 1em;
width:10em;
}
#disjointedText a {
display: block;
text-decoration:none;
text-align:center;
}
#disjointedText a:hover {
color: #cff;
background:black;
}
#disjointedText a span {display: none;}
#disjointedText a:hover span {
display: block;
position: absolute;
left:300px;
top:20px;
color:red;
background:#fff;
width:15em;
text-align:left;
}
#disjointedText dt {
position:absolute;
left:300px;
top:20px;
}
HTML
<h1>Disjointed rollover</h1>
<dl id="disjointedText">
<dt>Would you like a drink?</dt>
<dd><a href="#n">Wine<span>Wine is good for you!</span></a></dd>
<dd><a href="#n">Beer<span>Beer is refreshing!</span></a></dd>
<dd><a href="#n">Whisky<span>Whisky just gets you drunk!</span></a></dd>
</dl>
Thanks so very much for taking your time to create this very useful and informative site. I have learned a lot from your site. Thanks!!k
Thanks so very much for taking your time to create this very useful and informative site. I have learned a lot from your site. Thanks!!
I enjoyed your page. Keep up the good work! Feel free to visit my page. It\'s cool too.c
You have an outstanding good and well structured site. I enjoyed browsing through it.e
Thanks so very much for taking your time to create this very useful and informative site. I have learned a lot from your site. Thanks!!
Best links
e
Hi, good morning to all of you... Nice Guestbook ;-) !!!
Фильмы сеоиалы в HD https://film-hd-online.ru/
Thanks so very much for taking your time to create this very useful and informative site. I have learned a lot from your site. Thanks!!