problema menu verticale ul

**frankiespinolo** · 11-03-2009, 18:36

Salve ragazzi,
all'interno di una lista verticale, apro delle sottoliste per creare dei sottomenu.
Il problema è che alla lista principale più precisamente agli[*] assegno un'immagine di background con i css per dare la parvenza di pulsanti di menu.
Per questo motivo sono costretto ad assegnare sempre tramite css ai[*] oltre al width anche un height, in modo da visualizzare correttamente l'immagine di background.
Proprio assegnando l'height gli[*] della lista principale mi rimangono "appiccicati" gli uni agli altri sovrapponendosi agli[*] delle sottoliste.
COme si può risolvere questa cosa?

Vi posto il codice con il css dell'intera pagina di esempio.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
text-align: center; /*centra in IE 5.x */
color:#FFFFFF;
background-color:#FFFFFF;
}

.menu_navigazione {
width:200px;
list-style-type:none;
margin:20px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.menu_navigazione li {
width:173px;
height:25px;
background-image:url(img/p_normale.gif);
background-repeat:no-repeat;
margin:0px auto;
text-align:center;
padding-top:5px;
padding-right:0px;
font-size:12px;
font-weight:bold;
}

.menu_navigazione li a:link, .menu_navigazione li a:visited {
text-decoration:none;
color:#47a4be;
}

.menu_navigazione li a:hover {
text-decoration:underline;
color:#47a4be;
}

.menu_navigazione ul {
list-style-type:none;
list-style-image:url(img/marker.gif);
margin:5px 0px 5px 35px;
padding:0px 0px 0px 0px;
}

.menu_navigazione ul li {
width:173px;
margin:0px auto;
text-align:left;
padding-top:2px;
padding-left:0px;
font-size:10px;
font-weight:bold;
}

.menu_navigazione ul li a:link, .menu_navigazione ul li a:visited {
text-decoration:none;
color:#47a4be;
}

.menu_navigazione ul li a:hover {
text-decoration:underline;
color:#47a4be;
}
</style>
</head>

<body>
<ul class="menu_navigazione">
[*]
<a href="">
pulsante1
</a>

[*]
<a href="">
pulsante2
</a>
<ul>
[*]
<a href="">
sotto_pulsante1
</a>
<ul>
[*]
<a href="">
sotto_sotto_pulsante1
</a>

[/list]

[*]
<a href="">
sotto_pulsante2
</a>

[/list]

[*]
<a href="">
pulsante3
</a>
[/list]
</body>
</html>

**frankiespinolo** · 12-03-2009, 11:05

Cè nessuno che mi può aiutare?

**Mich_** · 12-03-2009, 11:30

Non riesco a capire cosa hai fatto.
Un codice come il tuo mi rifiuto di cercare di interpretarlo.

Riposta il codice usando i codici VB (ad esempio mediante il bottone # sopra il form di inserimento) e sistemando opportunamente le indentazioni.

**frankiespinolo** · 12-03-2009, 11:44

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
html,body { 
margin:0px 0px 0px 0px; 
padding:0px 0px 0px 0px; 
}  
body { 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:10px; 
margin:0px 0px 0px 0px; 
padding:0px 0px 0px 0px; 
text-align: center; /*centra in IE 5.x */ 
color:#FFFFFF; 
background-color:#FFFFFF; 
}  
.menu_navigazione { 
width:200px; 
list-style-type:none; 
margin:20px 0px 0px 0px; 
padding:0px 0px 0px 0px; 
}  
.menu_navigazione li { 
width:173px; 
height:25px; 
background-image:url(img/p_normale.gif); 
background-repeat:no-repeat; 
margin:0px auto; 
text-align:center; 
padding-top:5px; 
padding-right:0px; 
font-size:12px; 
font-weight:bold; 
}  
.menu_navigazione li a:link, .menu_navigazione li a:visited { 
text-decoration:none; 
color:#47a4be; 
}  
.menu_navigazione li a:hover { 
text-decoration:underline; 
color:#47a4be; 
}  
.menu_navigazione ul { 
list-style-type:none; 
list-style-image:url(img/marker.gif); 
margin:5px 0px 5px 35px; 
padding:0px 0px 0px 0px; 
}  
.menu_navigazione ul li { 
width:173px; 
margin:0px auto; 
text-align:left; 
padding-top:2px; 
padding-left:0px; 
font-size:10px; 
font-weight:bold; 
}  
.menu_navigazione ul li a:link, .menu_navigazione ul li a:visited { 
text-decoration:none; 
color:#47a4be; 
}  
.menu_navigazione ul li a:hover { 
text-decoration:underline; 
color:#47a4be; 
} 
</style> 
</head>  
<body> 
<ul class="menu_navigazione"> [*] 
               pulsante1  
       [*] 
               pulsante2  
                      <ul> [*] 
                                       sotto_pulsante1  
                                             <ul> [*] 
                                                               sotto_sotto_pulsante1  
                                                       [/list]
                                [*] 
                                         sotto_pulsante2  
                                 [/list]
           [*] 
                  pulsante3  
           [/list]
</body> 
</html>

**Mich_** · 12-03-2009, 12:53

Il tuo CSS non e` completo. Manca la formattazione delle liste di terzo livello

Tieni presente che con il selettore
.menu_navigazione li { ... }
regoli la formattazione dei li di TUTTI i livelli, per cui se vuoi una formattazione diversa, devi usare (ad esempio):
.menu_navigazione li { ... } /* per formattare tutti i li */
.menu_navigazione ul li { ... } /* per i li di secondo e terzo livello (*1) */
.menu_navigazione ul ul li { ... } /* per i li di terzo livello (*2) */

(*1) qui puoi correggere la formattazione per i li di secondo livello, ridefinendo gli attributi di quelli del primo livello
(*2) qui ridefinisci le caratteristiche del terzo livello

Trattandosi di un menu, di solito si definisce anche che i link abbiano
display: block;
width: ...;
height: ...;
In modo che il link prenda tutta l'area del[*], ed evitare posizionamenti ambigui del mouse.

Comunque ti consiglio di farti un giro tra i siti di menu. Alcuni riferimenti sono citati nei "link utili", in particolare il sito di CSSplay e` molto ben fornito e catalogato.

**frankiespinolo** · 12-03-2009, 13:34

grazie.
vado a dare un'occhiata.

Discussione: problema menu verticale ul

Strumenti discussione

Ricerca discussione

Visualizza

problema menu verticale ul

Scusatemi...

Permessi di invio