fanfa88
27-05-2008, 23:30
Ciao ragazzi, seguendo varie guide sono riuscito a creare una barra menu orizzontale con dei sottomenu che si aprono al passaggio del mouse. il mio problema è che questi sotto-menu si aprono in verticale mentre io li vorrei in orizzontale. Qualcuno sa dirmi cosa devo modificare all'interno del file css.???? Grazie per l'aiuto...
codice css
ul#menu_a_2livelli{
float: left;
margin: 0;
padding: 0;
background: #transparent;
list-style:none;
font:geneva;
font-weight: bold;
}
ul#menu_a_2livelli li ul li{
list-style:none;
margin:0;
padding:0;
}
ul#menu_a_2livelli li{
float:left;
margin: 0;
padding: 0;
color:006600;
font-weight: bold;
}
ul#menu_a_2livelli a:link,
ul#menu_a_2livelli a:visited{
display: block;
padding: 4px 18px;
color: #006600;
font-weight: bold;
text-decoration: none;
}
ul#menu_a_2livelli a:hover,
ul#menu_a_2livelli a:focus,
ul#menu_a_2livelli a:active{
background-color: #FFff66;
color: #33cc33;
text-decoration: none;
}
ul#menu_a_2livelli li ul{
display: none;
}
ul#menu_a_2livelli li:hover ul{
display: inline;
position: fixed;
z-index:1;
width:125px;
padding: 0;
margin: 0 0 0 0px;
background: #FF0000;
font-size:13px;
}
ul#menu_a_2livelli li li {
width: 125px;
}
codice html
<div align="center">
<ul class="Stile1" id="menu_a_2livelli">
<li><a href="mainframe.html" target="mainFrame" class="Stile2">HOME</a>
<ul> </ul>
</li>
<li><a href="chi siamo/presentazione.html" target="mainFrame" class="Stile2">CHI SIAMO</a>
<ul>
<li><a href="chi siamo/presentazione.html" target="mainFrame">Presentazione</a></li>
<li><a href="chi siamo/dove.html" target="mainFrame">Dove Siamo</a></li>
<li><a href="chi siamo/storia.html" target="mainFrame">Storia</a></li>
<li><a href="chi siamo/direttivo.html" target="mainFrame">Il Direttivo</a></li>
</ul>
</li>
<li><a href="scuola vela/presentazione.html" target="mainFrame" class="Stile2">SCUOLA VELA</a>
<ul>
<li><a href="scuola vela/presentazione.html" target="mainFrame">Presentazione</a></li>
<li><a href="scuola vela/corsi.html" target="mainFrame">Corsi</a></li>
<li><a href="scuola vela/foto.html" target="mainFrame">Foto</a></li>
</ul>
</li>
<li><a href="regate/regate.html" target="mainFrame" class="Stile2">REGATE</a>
<ul>
<li><a href="regate/calendariocvv08.html" target="mainFrame">Calendario</a></li>
<li><a href="regate/regate.html" target="mainFrame">Classifiche</a></li>
<li><a href="regate/foto.html" target="mainFrame">Foto</a></li>
</ul>
</li>
<li><a href="#" class="Stile2">NEWS</a>
<ul> </ul>
</li>
<li><a href="#" class="Stile2">FORUM</a>
<ul> </ul>
</li>
</ul>
</div>
codice css
ul#menu_a_2livelli{
float: left;
margin: 0;
padding: 0;
background: #transparent;
list-style:none;
font:geneva;
font-weight: bold;
}
ul#menu_a_2livelli li ul li{
list-style:none;
margin:0;
padding:0;
}
ul#menu_a_2livelli li{
float:left;
margin: 0;
padding: 0;
color:006600;
font-weight: bold;
}
ul#menu_a_2livelli a:link,
ul#menu_a_2livelli a:visited{
display: block;
padding: 4px 18px;
color: #006600;
font-weight: bold;
text-decoration: none;
}
ul#menu_a_2livelli a:hover,
ul#menu_a_2livelli a:focus,
ul#menu_a_2livelli a:active{
background-color: #FFff66;
color: #33cc33;
text-decoration: none;
}
ul#menu_a_2livelli li ul{
display: none;
}
ul#menu_a_2livelli li:hover ul{
display: inline;
position: fixed;
z-index:1;
width:125px;
padding: 0;
margin: 0 0 0 0px;
background: #FF0000;
font-size:13px;
}
ul#menu_a_2livelli li li {
width: 125px;
}
codice html
<div align="center">
<ul class="Stile1" id="menu_a_2livelli">
<li><a href="mainframe.html" target="mainFrame" class="Stile2">HOME</a>
<ul> </ul>
</li>
<li><a href="chi siamo/presentazione.html" target="mainFrame" class="Stile2">CHI SIAMO</a>
<ul>
<li><a href="chi siamo/presentazione.html" target="mainFrame">Presentazione</a></li>
<li><a href="chi siamo/dove.html" target="mainFrame">Dove Siamo</a></li>
<li><a href="chi siamo/storia.html" target="mainFrame">Storia</a></li>
<li><a href="chi siamo/direttivo.html" target="mainFrame">Il Direttivo</a></li>
</ul>
</li>
<li><a href="scuola vela/presentazione.html" target="mainFrame" class="Stile2">SCUOLA VELA</a>
<ul>
<li><a href="scuola vela/presentazione.html" target="mainFrame">Presentazione</a></li>
<li><a href="scuola vela/corsi.html" target="mainFrame">Corsi</a></li>
<li><a href="scuola vela/foto.html" target="mainFrame">Foto</a></li>
</ul>
</li>
<li><a href="regate/regate.html" target="mainFrame" class="Stile2">REGATE</a>
<ul>
<li><a href="regate/calendariocvv08.html" target="mainFrame">Calendario</a></li>
<li><a href="regate/regate.html" target="mainFrame">Classifiche</a></li>
<li><a href="regate/foto.html" target="mainFrame">Foto</a></li>
</ul>
</li>
<li><a href="#" class="Stile2">NEWS</a>
<ul> </ul>
</li>
<li><a href="#" class="Stile2">FORUM</a>
<ul> </ul>
</li>
</ul>
</div>