Come creare un menu orizzontale per sito web con fogli di stile css e relativo html

[podset]

Salve, vorrei creare un menu orizzontale per un sito web. Ho già pronti il foglio di stile css e il codice html, però attualmente le sezioni sono senza delle sottosezioni.

In pratica vorrei inserire delle sottosezioni e farle apparire quando uno passa col puntatore del mouse nel pulsante della sezione principale.

So come creare il codice html per ottenere le sottosezioni, ma non so come creare il relativo foglio di stile css per fare in modo che funzioni.

Ecco i due codici css e html su cui sto lavorando:

Codice css:

/*** Nav ***/
#nav {width:1240px;background:#666;color:#fff;}
#nav a {color:#fff; padding:15px 20px;display:inline-block; text-decoration:none; text-transform:uppercase;font-family:oswald;}
#nav a:hover{background:#333;}

/*** Slider ***/
.slider-wrapper {width:100%;}


Codice html:

<div id="nav"><a href="http://www.miosito.com/">HOME PAGE</a> <a href="http://www.miosito.com/">CONTATTAMI</a> <a href="http://www.miosito.com">CHI SONO</a>
</div>
<div class="slider-wrapper theme-default">

Qualcuno potrebbe scrivermi sia il codice html con l'aggiunta delle sottosezioni e poi il realtivo foglio di stile? Nel codice html che mi scriverete potete nominare le sottosezioni come vi pare, tanto dopo le rinomino io. Grazie!

[alemoppo]

Se non ho capito male, vorresti un menù a tendina a scomparsa. È ben spiegato qui: http://www.html.it/articoli/un-menu-...o-con-i-css-1/ (primo link trovato su google, potrebbero esserci altre guide ben fatte ma quella mi sembra sufficiente).

Comunque se non capisci qualcosa chiedi pure.

Ciao!

[podset]

Grazie per la risposta!

A me però (se fosse possibile) servirebbe una risposta personalizzata, perché non essendo un esperto, poi devo implementare il tutto nel mio css (che è già pronto). Ho paura che se devo fare riferimento ad un tutorial esterno con nozioni generali e non personalizzate, poi dopo devo capire come inserirle nel mio codice. Altrimenti non avrei iniziato una discussione sul forum se non avessi avuto bisogno di una risposta personalizzata. Capisci?

Comunque ora vado a vedere il link che mi hai proposto e vedo se riesco a capirci qualcosa, anche se (ripeto) ho già fatto le mie ricerche prima di intavolare questa discussione.

[podset]

alemoppo sono andato a vedere il tutorial e ci ho lavorato sopra cercando di capirci qualcosa e inserendolo nel mio template, ma come prevedevo non funziona.

Il fatto è che il codice del mio template ha una sintassi diversa dal codice del tutorial di "html.it", quindi ho dovuto riadattarlo allo stile di sintassi del mio codice, perciò non so se ho fatto qualcosa di sbagliato.

Per esempio, due voci (div#_______ a e il div#_______ a:hover) erano già presenti nel codice del mio template, quindi non li ho modificati come dice il tutorial ma li ho lasciati invariati come erano in precedenza. Non so se dipende da questo.

Comunque, qui sotto inserisco i due codici html e css che ho inserito nel mio che avevo già per far capire meglio che cosa ho fatto.

Codice html:

<div id="nav"><a href="http://www.miosito.com/">HOME PAGE</a> <a href="http://www.miosito.com/">CONTATTAMI</a> <a href="http://www.miosito.com">CHI SONO</a>
<ul>
<ul>
<li><a href="http://www.miosito.com/">SEZIONE 1</a>
<ul>
<li><a href="http://www.miosito.com/">SOTTOSEZIONE 1</a></li>
<li><a href="http://www.miosito.com/">SOTTOSEZIONE 2</a></li>
</ul>
</li>
</ul>
</ul>
<a href="http://www.miosito.com/">SEZIONE 2</a>
<ul>
<ul>
<li><a href="http://www.miosito.com/">SEZIONE 3</a>
<ul>
<li><a href="http://www.miosito.com/">SOTTOSEZIONE 1</a></li>
<li><a href="http://www.miosito.com/">SOTTOSEZIONE 2</a></li>
</ul>
</li>
</ul>
</ul>
</div>

Codice css:

/*** Nav ***/
#nav {width:1240px;background:#666;color:#fff;}
#nav a {color:#fff; padding:15px 20px;display:inline-block; text-decoration:none; text-transform:uppercase;font-family:oswald;}
#nav a:hover{background:#333;}
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#nav li
{
width:100px;
float:left;
margin: 0;
padding: 0;
border-right: 1px solid black;
color:black;
}
#nav li ul
{
display: none
}
#nav li:hover ul
{
display: block;
position: absolute;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid black;
background: white;
}
#nav li li { border:none; width:150px; }
#nav li li a { padding:2px 2px 2px 10px; }

Quest'ultimo codice css ovviamente è relativo solo alla parte del menu, non è tutto il foglio di stile dell'intero mio sito.

Praticamente il menu mi viene con la SEZIONE 1 e SEZIONE 2 spostati sotto le altre sezioni e le loro SOTTOSEZIONI invece non compaiono, anzi compaiono in bianco.

Qualcuno sa dirmi dove sbaglio?
Grazie...

[Formulariofisica]

Piccolo consiglio: non lavorare con i CSS su dei tag HTML generici, lavora piuttosto con le classi se hai bisogno (come in questo caso) di comportamenti specifici per un menu'.

Io personalmente ti consiglio di creare due classi CSS come queste:

ul.Menu-content{
    display:none;
    height: auto;
    text-align: center;
}

li.Menu_comparsa:hover ul.Menu-content{
    display:block;
}

i singoli bottoni quindi avranno un attributo class="Menu_comparsa"
la lista che dovra' comparire, avra' attributo class="Menu-content"


NB. Questo codice ha un difetto: andando con il mouse su un singolo bottone del menu, TUTTE le sottoliste saranno visibili, di conseguenza ogni bottone avra' una sua classe CSS che attivera' la sottolista adeguata (Esempio: "Chi siamo" avra' class="chi_siamo_comparsa" e la sua sottolista class="chi_siamo_content".)
Sicuramente esiste codice piu' elegante, ma se si tratta di pochi bottoni e si vuole apprendere il concetto, secondo me va piu' che bene come inizio.
Spero di esserti stato utile, se hai dubbi chiedi pure.

[podset]

Formulariofisica ho provato il tuo css e non funziona niente. Il menu appare tutto in verticale con le sottosezioni tutte visibili. Non esiste un qualcosa di meno complicato da poter inserire anche in un template con un codice tag generico?

[Formulariofisica]

Per sicurezza mi son creato dei file sul pc per provare e, eccetto qualche piccola modifica apportata, il concetto del codice mandato prima funzionava. Posto il codice utilizzato da me (per quanto riguarda lo stile del tema, basta inserire in "class="..."" anche il nome delle classi CSS del tema.

<html>
  <head>
      <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <div id="nav"><a href="http://www.miosito.com/">HOME PAGE</a> <a href="http://www.miosito.com/">CONTATTAMI</a> <a href="http://www.miosito.com">CHI SONO</a>
    <ul class="Menu_comparsa-1">
      <li><a href="http://www.miosito.com/">SEZIONE 1</a></li>
        <ul class="Menu-content-1">
          <li><a href="http://www.miosito.com/">SOTTOSEZIONE 1</a></li>
          <li><a href="http://www.miosito.com/">SOTTOSEZIONE 2</a></li>
        </ul>
    </ul>

    <ul>
      <li><a href="http://www.miosito.com/">SEZIONE 2</a></li>
    </ul>

    <ul class="Menu_comparsa-3">
      <li><a href="http://www.miosito.com/">SEZIONE 3</a>
        <ul class="Menu-content-3">
          <li><a href="http://www.miosito.com/">SOTTOSEZIONE 1</a></li>
          <li><a href="http://www.miosito.com/">SOTTOSEZIONE 2</a></li>
        </ul>
      </li>
    </ul>

  </div>
</html>

ul.Menu-content-1{
    display:none;
    height: auto;
}

ul.Menu_comparsa-1:hover ul.Menu-content-1{
    display:block;
}

ul.Menu-content-3{
    display:none;
    height: auto;
}

ul.Menu_comparsa-3:hover ul.Menu-content-3{
    display:block;
}

Se hai dubbi scrivimi pure

[podset]

Ho provato anche questo e funziona, però il menu dovrebbe risultare orizzontale, mentre invece le ultime tre sezioni si vedono una sopra l'altra in verticale. Ma aparte questo, io devo mantenermi fedele alla grafica del mio template, quindi con il tuo css a me (dato che non sono un programmatore) mi ci vuole un sacco di tempo per capire come adattarlo al codice del mio sito, perciò mi ci vorrebbe una cosa un po' più pronta.

Io per esempio stavo lavorando a questo codice:

Codice css:

/*** Nav ***/
#nav {width:1240px;background:#666;color:#fff;float: left;margin: 0px; padding: 0;position: relative;border-top:0px solid #a70100;height:35px;}
#nav {margin: 0;padding: 0;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;margin: 0;padding: 0;border-left:1px solid #444;border-right:1px solid #444;height:35px;}
#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font:normal 12px oswald; margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;}
#nav li a:hover, #nav li a:active {background: #f20100;color: #FFF;display: block;text-decoration: none;margin: 0;padding: 9px 12px 10px 12px;}
#nav li {float: left;padding: 0;}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 140px;margin: 0;
padding: 0;}
#nav li ul a {width: 140px;}
#nav li ul ul {margin: -25px 0 0 161px;}
#nav li:hover ul ul, #Scuol li:hover ul ul ul, #Scuol li.sfhover ul ul, #Scuol li.sfhover ul ul ul { left: -999em;}
#nav li:hover ul, #Scuol li li:hover ul, #Scuol li li li:hover ul, #Scuol li.sfhover ul, #Scuol li li.sfhover ul, #Scuol li li li.sfhover ul {left: auto;}
#nav li:hover, #Scuol li.sfhover {position: static;}
#nav li li a, #nav li li a:link, #nav li li a:visited {background: #ff3837;width: 140px;color: #FFF;
display: block;font:normal 12px oswald;margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;z-index:9999;border-bottom:1px dotted #444;}
#nav li li a:hover, #nav li li a:active {background: #473b3b;color: #FFF;display: block; margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;}

Codice html:

<div id="nav">
<ul>
<li><a href="http://www.miosito.com/">HOME PAGE</a></li>
</ul>
<ul>
<li><a href="http://www.miosito.com/">CONTATTAMI<br /></a>
<ul>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
<li><span style="color: #000000;"><a style="color: #000000;" href="http://www.miosito.com/">Submenu 1</a></span></li>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.miosito.com/">CHI SONO</a></li>
</ul>
<ul>
<li><a href="http://www.miosito.com/">SEZIONE 1</a>
<ul>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
<li><span style="color: #000000;"><a style="color: #000000;" href="http://www.miosito.com/">Submenu 1</a></span></li>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.miosito.com/">SEZIONE 2<br /></a>
<ul>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
<li><span style="color: #000000;"><a style="color: #000000;" href="http://www.miosito.com/">Submenu 1</a></span></li>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
<li><a href="http://www.miosito.com/"><span style="color: #000000;">Submenu 1</span></a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.miosito.com/">SEZIONE 3</a></li>
</ul>
</div>

Questo è quello che fa al caso mio, però le scritte dentro i pulsanti vengono troppo piccole. C'è un modo per rendere le scritte più grandi (per esempio di 16 px) e di ingrandire anche il pulsante che le contiene?
Cioè tu sai quali righe di codice devo modificare per ottenere questa cosa?

[Formulariofisica]

A me personalmente questo codice crea un menu verticale, non orizzontale come hai richiesto.
Altra consiglio: utilizza un site-builder se non sei programmatore, cosi' non devi scrivere codice ed hai un'idea gia' grafica di quello che stai creando.

Inoltre: i CSS inline (style="....") sono altamente sconsigliati ormai, specie se ti interessa il ranking Google.

Infine, per la grandezza:

#nav li li a, #nav li li a:link, #nav li li a:visited {background: #ff3837;width: 140px;color: #FFF;
display: block;font:normal DIMENSIONE_CHE_PREFERISCIpx oswald;margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;z-index:9999;border-bottom:1px dotted #444;}

[podset]

Con un site-builder posso usare solo i template consigliati da loro, comunque grazie per il suggerimento. Li avevo già provati in passato, ma mi trovo meglio su altervista, perché posso personalizzare di più.
Per quanto riguarda il css non sono un esperto di queste cose, mi toccherebbe rifare da capo tutto il codice e ci metterei una vita. Ormai ho deciso di usare il template che ho a disposizione. Credo comunque non sia un problema così grosso per quanto riguarda il posizionamento sul motore di ricerca.

[Formulariofisica]

Va beh i miei erano solo consigli dopo qualche esperienza e provo semplicemente a condividerli..
Comunque spero tu abbia risolto dopo i vari post!