problema con menu dropdown

[marika78]

ciao a tutti. ho creato un menù in css che ha il seguente codice:


<div id="header">
<div id="menu">
<ul>
<li class="current_page_item">home
[*]viaggi


[*]iscrizione
[*]gallery
[*]contatti[*]theraidexperience
[/list]
</div>
</div>



la parte di css legata al menù è:

#header {
width: 900px;
margin: 0 auto;
height: 71px;
letter-spacing: -1px;
font-family: Georgia, "Times New Roman", Times, serif;
}


#menu {
float: right;
margin-top: 21px;
}

ora io dovrei creare un menu dropdown alla voce viaggi. In pratica dovrei avere dele sottovoci viaggio1, viaggio2, viaggio 3, viaggio 4. Ho trovato un esempio di menù di questo tipo ma nn riesco a integrare la struttura dell'esempio trovato con quella del mio sito (quella che ho postato qui sopra)

[marika78]

ciao ,
il problema è cambiato rispetto all'ultimo. nel senso che sono riuscita a fare ciò che volevo cioè un menu orizzontale in cui la voce viaggi ha un sottomenu. Ora il problema è che vorrei svincolare" la sottolista dalle caratteristiche di quella principale. Mi spiego: quando con il mouse si passa sopra alle voci di menù appare una freccia (che nel codice è img03.jpg). però ora quando passo sulla voce viaggi la freccia non appare ma appare sulle voci della sottolista. Io vorrei che la preccia appare normale come nelle altre voci di menu e al limite dare uno sfondo colorato alle sottovoci (che ne so, bianco e poi nero quando ci si va sopra)

vi posto il codice:

<div id="menu">
<ul>[*]Home[*]Viaggi
<ul>[*]Link 2-1[*]Link 2-2[*]Link 2-3[/list]
[*]Iscrizione[*]Gallery[*]Contatti[/list]
</div>

e il css:

body{
behavior: url(csshover2.htc); /*per IE6*/
}
#menu{
margin:0;
padding:0;
float: right;

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

}
#menu li a{
display: block;
float: left;
padding: 30px 20px 0 20px;
text-decoration:none;
text-align: center;
line-height: 30px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #36220c;
}
#menu li a:hover{
background: url(images/img03.jpg) no-repeat center top;
}
#menu ul ul{
position: absolute;
top: 30px;
width: 100px;
visibility: hidden;
}
#menu ul li:hover ul{
visibility:visible;
}

[Mich_]

Menu a piu` livelli ce ne sono molti in giro, di tutte le fogge e caratteristiche.
La raccolta migliore che ho visto e` quella di CSSplay, citata anche tra i "link utili".

Inoltre pochi giorni fa e` apparso questo articolo di A.Fulciniti che mi pare abbia vari spunti che ti possono interessare: si tratta di un intervento didattico su come creare un menu passo-passo.

[marika78]

il menu l'ho creato e sono anche riuscita a dare lo sfondo bianco al submenu. ora vorrei solo riuscire a eliminare dal submenu la freccia che compare (è la parte di codice: #menu li a:hover{ background: url(images/img03.jpg) no repeat center top; } che vorrei rimanesse solo per la voci principali del menù e dare al sub menu nello stato hover uno sfondo colorato.



<div id="menu">
<ul>[*]Home[*]Viaggi
<ul>[*]Link 2-1[*]Link 2-2[*]Link 2-3[/list]
[*]Iscrizione[*]Gallery[*]Contatti[/list]
</div>

il css è:

/* Menu */

#menu{
margin-top: 21px;
padding:0;
float: right;

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

}
#menu li a{
display: block;
float: left;
padding: 30px 20px 0 20px;
text-decoration:none;
text-align: center;
line-height: 30px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #36220c;
}
#menu li a:hover{
background: url(images/img03.jpg) no-repeat center top;
}
#menu ul ul{
margin-top: 21px;
position: absolute;
top: 30px;
width: 100px;
visibility: hidden;
}

#menu ul li:hover ul{
visibility:visible;
background-color: #f4f4f4;
}