Ciao a tutti,
sto organizzando un meno con il suo relativo sottomenu. Entrambi devo essere orizzontali.
sono riuscita a sistemare il foglio di stile in modo che menu principale e il sottomenu vengano posizionati orizzontalmente ma nella visualizzazione il sottomenu mi sposta le voci del menu principale, che compaiono dopo la voce selezionata, verso sinistra...
es
voce1 | voce2 | voce3 | voce4
se seleziono la voce2 menu e sottomenu appaiono cosi:
voce1 | voce2 |voce3 | voce4
sottovoce1 | sottovoce2 | sottovoce3
codice:
<div class="menucontainer">
<div class="modulemainmenu">
<div class="modulecontent">
<ul id="menu_0" class="level0">
<li class="level0" id="menu_1">Home Page
<li class="level0 active" id="menu_250">Premiazione
<ul id="menu_250" class="level1">
<li class="level1" id="menu_251">Presentazione Candidati
<li class="level1" id="menu_252">Vincitori
[/list]
<li class="level0" id="menu_256">Iscrizione
<li class="level0" id="menu_259">contatti
[/list]
</div>
</div>
</div>
di seguito un pezzo il css interessato
codice:
.menucontainer{
position:absolute;
top:83px;
left:20px;
width:1002px;
padding-left:220px;
}
.modulemainmenu {
text-align:left;
vertical-align:top;
}
.modulecontent {
color:#c32432;
text-align:left;
width: auto;
margin-top: 50px;
}
.modulecontent ul {
float: none;
margin:0;
padding:0px 10px 0;
list-style:none;
}
.modulecontent a {float:none;}
.modulecontent li {
float:left;
height: 28px;
margin:0;
margin-left:1px;
padding:0 0 0 6px;
}
.modulecontent li:hover,
.modulecontent li:hover a,
.modulecontent li.active { }
.modulecontent li.active a { color:#c32432;
}
.level0 {
float: left;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
border-left: 1px solid #cccccc;
}
level0 li {
display: inline;
_display: block;
_float: left;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
.level0 a {
_display: block;
_float: left;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: center;
padding: 1px 5px 1px 5px;
color: #c32432;
border-left: 0 none;
}
.level0 a:visited {
_display: block;
_float: left;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: center;
padding: 1px 5px 1px 5px;
color: #000000;
border-left: 0 none;
}
.level1 {
float:left;
}
.level1 ul{
float:left;
}
.level1 li{
width:auto;
}
mi sapete dare qualche indicazione in merito al mio problema (uso firefox)
grazie