[CSS] Visualizzare contenuto solo con a:hover
Ciao, sto realizzando un menù orizzontale che trovate qui: http://mypaglia.altervista.org/menu/
Il problema sta nel fatto che il testo dddd vorrei che apparisse solo quando passo il mouse sopra a "contatti".
Possibilmente senza utilizzare javascript.
Il codice css e html è questo:
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu</title>
<style>
body { background: #F2F2F2;
font-family: Arial;
font-size: 13px;
line-height: 1.7;
color: #444;}
a {color: #666;
font-weight: bold;}
a:active {
color: #666;
}
a:hover {color: #444;}
#menu {margin: 0 auto;
margin-top: 0px;
float: right;
border-top: 5px solid #999;}
#menu ul{list-style: none;}
#menu li {display: inline;}
#menu li a{
text-decoration: none;
float: left;
width: 100px;
height: 25px;
margin:5px;
margin-top:0px;;
border: 1px solid #999;
text-align: center;
border-top: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-top-left-radius: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-top-right-radius: 0px;
-webkit-border-top-right-radius: 0px;
}
#menu li a:hover{
height: 100px;
text-align: center;
}
#menu li span{text-align: center;}
#menu a p {display:block;
margin-top:10px;
font-family:"Arial Narrow";
font-size:20px;}
</style>
</head>
<body>
<div id="menu">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Blog</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>About Me</span></a></li>
<li><a href="#"><span>Contatti</span><br><p>dddd</p></a></li>
</div>
</body>
</html>
