[Risolto] menu a tendina
2 partecipanti
Forum dei Forum: Aiuto per Forumattivo :: Assistenza a problemi e richieste :: Problemi con uno script o codici :: I problemi risolti con i codici
Pagina 1 di 1 • Condividi
[Risolto] menu a tendina
vorrei creare un menu a tendina per i social network come questo in foto:
come faccio?! grazie
come faccio?! grazie
Ultima modifica di Pyton il Lun 13 Giu 2011 - 17:22 - modificato 1 volta.
Re: [Risolto] menu a tendina
ho trovato questo....quarda se ti puo' essere utile questo
- Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html{
background-color: #545454;
margin:50px 0 0 0;
padding:0;
}
#menu{
width:100%;
background-color:#373737;
}
/*stile generale delle liste*/
#menu ul{
margin:0;
padding:0;
position: relative;
height: 30px;
width:100%;
}
/*stile generale delle sub liste*/
#menu ul ul{
position: absolute;
top:30px;
left: 0;
visibility: hidden;
}
/*stile generale dei list item*/
#menu li{
list-style: none;
float: left;
padding:0 5px;
background-color:#373737;
}
#menu ul, #menu li{
background-color:#373737;
}
#menu ul ul, #menu li li{
background-color:#767676;
}
#menu ul ul ul, #menu li li li{
background-color:#DDDDDD;
}
#menu a{
display:block;
float:left;
padding:0 30px;
text-decoration:none;
text-align: center;
line-height: 30px;
font-family: Verdana;
font-size: 9px;
font-weight: bold;
}
#menu ul :hover > a, #menu ul a:hover{
height:20px;
border-top:5px solid #373737;
border-bottom:5px solid #373737;
line-height:20px;
}
#menu ul :hover > a.sub{
height:25px;
border-bottom:none;
line-height:20px;
}
/*stile link primo livello*/
#menu ul a{
color:#FFFFFF;
}
#menu ul :hover > a{
background-color:#767676;
border-color:#373737;
color:#FFCC00;
}
/*stile link secondo livello*/
#menu ul ul a{
color:#FFCC00;
}
#menu ul ul :hover > a{
background-color:#DDDDDD;
border-color: #767676;
color:#336699;
}
/*stile link terzo livello*/
#menu ul ul ul a{
color:#336699;
}
#menu ul ul ul :hover > a{
background-color:#FFF;
border-color:#DDDDDD;
}
#menu ul li:hover ul, #menu ul a:hover ul{
visibility:visible;
}
#menu ul li:hover ul ul, #menu ul a:hover ul ul{
visibility:hidden;
}
/*terzo livello visibile su hover del secondo livello*/
#menu ul ul li:hover ul, #menu ul ul a:hover ul{
visibility:visible;
}
#menu table {
position:absolute;
border-collapse:collapse;
top:0;
left:0;
width:100%;
}
#menu a:hover{
height:20px;
border-top:5px solid #373737;
border-bottom:5px solid #373737;
line-height:20px;
}
#menu ul a.sub:hover{
height:25px;
border-bottom:none;
line-height:20px;
}
#menu ul a:hover{
background-color:#767676;
border-color:#373737;
color:#FFCC00;
}
#menu ul ul a:hover{
background-color:#DDDDDD;
border-color: #767676;
color:#336699;
}
#menu ul ul ul a:hover{
background-color:#FFF;
border-color:#DDDDDD;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#URL">TITOLO1</a>
</li>
<li>
<a href="#URL" class="sub">TITOLO 2 >><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#URL">testo segnaposto</a></li>
<li><a href="#URL" class="sub">testo 1 ><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#URL">testo 1</a></li>
<li><a href="#URL">testo 2</a></li>
<li><a href="#URL">testo segnaposto</a></li>
<li><a href="#nogo">tipografia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#URL">testo 2</a></li>
<li><a href="#URL">testo segnaposto</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="sub">TITOLO 3 >><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#URL">testo</a></li>
<li><a href="#URL" class="sub">TITOLO >><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#URL">testo 1 </a></li>
<li><a href="#URL">testo 2</a></li>
<li><a href="#URL">testo segnaposto</a></li>
<li><a href="#URL">TESTO</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="sub">TITOLO 4 >><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#URL">testo 1</a></li>
<li><a href="#URL">testo 2 </a></li>
<li><a href="#URL">testo segnaposto</a></li>
<li><a href="#URL">testo</a></li>
<li><a href="#URL">testo</a></li>
<li><a href="#URL">testo 1 </a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<div>
<p style="color:white;">
QUI SCRIVI QUELLO CHE VUOI</p>
</div>
</body>
</html>
Re: [Risolto] menu a tendina
ciao e grazie della risposta..però non saprei dove inserire il codice :)
Re: [Risolto] menu a tendina
ci devi perdere un po di tempo:.....incollalo su una pagina html e fai l'anteprima , ti sara' tutto piu chiaro
Re: [Risolto] menu a tendina
grazie sei stato veramente d'aiuto..devo prenderci un po la mano... grazie mille
Argomenti simili
» [Risolto] Codice per menu a tendina nelle sezioni
» Menu di navigazione con descrizione
» menu a tendina
» [Risolto] Problema menu jquery
» Messaggi privati in un menu a tendina
» Menu di navigazione con descrizione
» menu a tendina
» [Risolto] Problema menu jquery
» Messaggi privati in un menu a tendina
Forum dei Forum: Aiuto per Forumattivo :: Assistenza a problemi e richieste :: Problemi con uno script o codici :: I problemi risolti con i codici
Pagina 1 di 1
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.