Passo passo per creare un menu

[lucacompagnone]

Buona giornata,allora io ho studiato molte guide su css in generale,ma ora vorrei capire una volta per tutte come realizzare un menu orizzontale,spero che mi aiutate.
Allora io ad esempio faccio una lista non ordinata in html:

<div id="menu"> 
<ul> [*]Link 1 
<ul> [*]Link 1-1 [*]Link 1-2 [*]Link 1-3 [/list]

</div>

In certi esempi ho visto che al posto di <div id=""> c'era <ul id=""> quale è meglio usare?
Chi mi spiega passo passo come trasformare questa lista in un menu orizzonate,quali sono le regole basilari?
Grazie mille a tutti coloro che mi aiuteranno.

[Mich_]

La marcatura e` corretta.

Per la formattazione, puoi usare i numerosi esempi che trovi in rete (puoi partire dai "link utili" - vedi ad esempio la pagina di CSSplay)



<div id="..."><ul> oppure <ul id="...">
Non c'e` grande differenza. Nel primo caso inserisci un oggetto in piu`, che non serve, ma in alcuni casi puo` essere comodo per ottimizzare il cross-browser.

[lucacompagnone]

grazie Mich...io volevo sapere se ci sono delle regole "fondamentali" per far si che una lista ul si trasformi in un menu orozzontale.

[Mich_]

Per trasformare una lista da verticale in orizzontale, di solito si usa il float:left, che ha l'effetto di affiancare degli oggetti di tipo block (se non lo sono vengono trasformati in block).
A volte si preferisce invece usare il display:inline, che pero` non permette di dare dimensioni, per cui il le varie voci risultano di dimensioni diverse.

Comunque in questi casi valgono piu` gli esempi della teoria.

[lucacompagnone]

#menu{
width: 100%;
padding: 0;
margin: 0;
}
#menu ul{
padding: 0;
margin: 0;
}

#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
} 

#menu li a{
width: 100px;
height: 30px;
display: block;
text-decoration: none;
line-height: 30px;
text-align: center;
background-color: black;
color: white;
} 

#menu li a:hover{
background-color: red;
} 

#menu ul ul{
position: absolute;
top: 30px; 
visibility: hidden;
} 

#menu ul li:hover ul{
visibility:visible;
}

Ecco,però io vorrei che il sottomenu appaia su un unica riga e non in modo verticale,come posso fare?

[Mich_]

Una cosa come questa?
CSS play's - 'Push-Pull' menu

Altrimenti ne trovi molti (che puoi anche vedere prima di scaricare) a partire dai "link utili", come gia` ho consigliato

[lucacompagnone]

esatto