Ciao a tutti.
Ho un problema: devo realizzare un menų orizzontale a 5 voci e la seconda voce deve avere un sottomenų verticale di 3 voci.
Riesco a visualizzare il menų orizzontale, ma di quello verticale, neanche l'ombra...
Non riesco a venirne fuori; provo a postarvi il codice.
La pagina HTML:
<style type="text/css">
@import "screen.css";
</style>
<script type="text/javascript" src="onfocus.js"></script>
</head>
<body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<table width="100%" height="100%" border="0">
<tr>
<td >
<ul class="menu1">
[*]Prima voce
[*]Seconda voce
<ul>
[*]Prima Sotto Voce
[*]Seconda Sotto Voce
[*]Terza Sotto Voce
[/list]
[*]terza voce
[*]quarta voce
[*]quinta voce[/list]
</td>
</tr>
</table>
</body>
</html>
Il codice CSS (screen.css):
.menu1{
background:#FFF;
color:#000;
margin:0;
padding:0.5em 0;
text-align:center;
}
.menu1 li{
display:inline;
}
.menu1 a{
height:0;
padding:0.5em 0;
text-decoration:none;
margin:-0.5em 1em;
}
/* SOTTO MENU */
.menu1 ul{
margin:0;
padding:0;
list-style:none;
width:17em;
}
.menu1 ul li{
float:none;
}
.menu1 ul a{
float:none;
display:block;
height:1.8em;
line-height:1.8em;
border-right:1px solid #000;
border-left:10px solid #000;
border-bottom:1px solid #000;
}
/* MENU ON OFF */
.menu1 ul,
.menu1 ul.subMenu-off{
position:absolute;
visibility:hidden;
}
.menu1 ul.subMenu-on{
visibility:visible;
}
/* POSIZIONAMENTO DEL SOTTO MENU */
.menu1 ul.subMenu-on{
position:absolute;/* primo livello di annidamento:menu a discesa */
top:2em;
left:-1px;
visibility:visible;
border-top:1px solid #000;
}
.menu1 ul.subMenu-on ul.subMenu-on{
margin:0 0 0 -1px;/* livelli di annidamento superiori al primo:menu a comparsa laterale */
width:17em;
position:absolute;
top:-1px;
left:17em;
border-top:1px solid #000;
}
/* COLORI */
.menu1{
background:#EEE;
color:#000;
}
.menu1 a{
background:#EEE;
color:#000;
}
/* EFFETTO ROLLOVER */
.menu1 a:hover,
.menu1 a:focus,
.menu1 a:active{
text-decoration:underline;
}
/* FRECCETTE */
.menu1 a.continua{
background:url(continuaOrz.gif) #EEE center bottom no-repeat;
}
.menu1 ul a.continua{
background:url(continua.gif) #EEE right center no-repeat;
Qualcuno č in grado di darmi una mano ?
Grazie
Marco
}
Rispondi quotando
