Seguendo una guida ho realizzato un menu a due livelli che ha un problema enorme, tutti i livelli sono fissi e visibili, Io vorrei che il secondo livello del menu fosse visualizzabile solo quando il mouse ci passa sopra.
questo è il codice HTMLche ha realizzato la struttura del menù:
<body>
<div id="menu">
<ul>[*]vini rossi
<ul>[*]Barolo[*]Barbera[*]Brunello[*]Amarone[/list]
[*]provoloni
[*]pecorini
[*]mozzarelle[/list]
</div>
</body>
Questo è il css relativo:
#menu {
background-color: #CCC;
height: 30px;
width: 200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #666;
border: 1px solid #666;
}
#menu ul{
list-style: none;
margin: 0;
padding:0;
}
#menu li{
border-bottom: 1px solid #333;
}
#menu li a:link, #menu li a:visited{
font-size: 24 px;
display: block;
padding: 4px 0 0 4px;
border-left: 12px solid #000;
border-right: 2px solid #000;
background-color:#C30;
color:#CCC;
text-decoration: none;
}
#menu li a:hover{
font-size: 24 px;
display: block;
padding: 4px 0 0 4px;
border-left: 12px solid #ff0000;
border-right: 2px solid #ff0000;
background-color: #C60;
color:#fff;
text-decoration: none;
}
#menu ul ul{
margin-left:12px;
}
#menu ul ul li{
border-bottom: 1px solid #333;
}
#menu ul ul a:link, #menu ul ul a:visited{
margin-left:12px;
background-color: #C60;
color:#fff;
}
Penso che manchi qualche informazione che nasconda il secondo livello per farlo poi apparireal passaggio del mouse.
Quale non lo sò.
grazie dell'attenzione
Rispondi quotando