Modifica di css di un menu a tendina

  • Creatore Discussione Creatore Discussione Monital
  • Data di inizio Data di inizio

Monital

Utente Attivo
15 Apr 2009
778
2
18
Ragazzi un aiuto per cortesia che il css mi è ancora un pò ostico, almeno il più complesso
Ho trovato questo menu a tendina su 3 livelli che vorrei adattare eprchè mi paice sia come colori che come struttura

Vorrei però che i primi <li> principali invece di verticali siano orrizontali ci sono risucito in aprte togliendo

list-style: none e sostiruendolo con float- left soloc he ès uccesso un patatrac.

Potete darmi una mano a modificare il css e magari indicandomi la struttura esatta dell'html ?

Se cortesemente avete un pò di tempo in più magari commentonado anche il cambiamento eprchè voglioc ercare di capire una volta per tutte questo tipo dis trutture

Codice:
#css_menu_12, #css_menu_12 ul, #css_menu_12 li{
padding:0;
margin:0;
}
#css_menu_12 li{
list-style: none;
position: relative;
width:120px;
height: 23px;
padding:0 20px;
background:url(../img/li_bg.jpg) repeat-x top left;
border-left:5px solid #6D818A;
border-right:1px solid #6D818A;
line-height: 23px;
cursor:pointer;
}
#css_menu_12 li a{
text-decoration:none;
color:#272F32;
font-weight:bold;
font-size:11px;
text-transform:uppercase;
letter-spacing:1px;
}
#css_menu_12 li.more{
border-left:5px solid #333333;
}
#css_menu_12 li li{
background:url(../img/li_li_bg.jpg) repeat-x top left;
}
#css_menu_12 li:hover{
background-position:bottom;
}
#css_menu_12 li:hover.more{
border-left:5px solid #6D818A;
}
#css_menu_12 ul ul, #css_menu_12 ul li:hover ul ul, #css_menu_12 ul ul ul{
position: absolute;
top:0;
left:160px;
visibility:hidden;
}
#css_menu_12 ul li:hover ul, #css_menu_12 ul ul li:hover ul{
visibility:visible;
}


grazie
 
Ultima modifica di un moderatore:
ok ci sono arrivato

principalmente andava aggiunto

PHP:
display: inline-block;

ho seguito una guida molto sepcifica che non so se posso postarne il link.

una cosa non mi riesce però se magari qualcuno sa come farlo accetto il suggerimento

in rpatica se nel menù metto
<a href etc...>

me lo visualizza come collegamento ieprtestale cioè blu sottolineato e vorrei evitarlo

cmq mo cerco in giro se nel mentre nessuno sa dirmi niente
 
Ultima modifica:
Strano: nel CSS è scritto che i collegamenti non devono essere sottolineati né colorati. Puoi postare il codice HTML della pagina?

si infatti nella modifica del post l'ho scritto che avevo risolto, avevo sbagliato nel css invece di #menu avevos critto# men semplice distrazione.

però ho una ltro problema che riscontro anche in un a ltro menu molto più semplice

posto il codice modificato da me per la mia esigenza

PHP:
#main {text-align: center; white-space:nowrap;}
#main ul {list-style: none; padding: 0}
#main li {
display: inline-block;
position: relative;
width:120px;
height: 23px;
padding:0 20px;
background:url(../img/li_bg.jpg) repeat-x top left;
border-left:5px solid #6D818A;
border-right:1px solid #6D818A;
cursor:pointer;
line-height: 23px;
}
#main ul ul {display: none; position: absolute; z-index: 9;}
#main li:hover > ul, #main li li {display: block}
#main li a{
text-decoration:none;
color:#272F32;
font-weight:bold;
font-size:11px;
text-transform:none;
letter-spacing:1px;
}
#main li li{
background:url(../img/li_li_bg.jpg) repeat-x top left;
}
#main li:hover{
background-position:bottom;
}
#main ul ul ul {left: 100%; top: 0}
#main ul ul ul li:first-child > a {border-radius: 0 5px 0 0}
#main ul li:hover ul, #main ul ul li:hover ul{
visibility:visible;
}

ora praticamente quando il cursore si posiziona sul primo livello i secondi livelli appaio e scompaiono velocemente nond ando il tempoa l mouse di posizionarmi sul secondo livello, ci emtto circa5 minuti per azzeccare la posizione

da cos dipende questa cosa?
 
raga scusate se riprendo sta cosa ma non riescoaveramente a capire, per un pò non lo stava facendo più ed avevo epsnato dipendesse da me invece anche altri utenti stanno diventando scemi su sta cosa

perchè i sottolivelli dei menu appaio e scompaiono ad una velocità tale d anone ssere selezionati?

ci vuole un ora per farlo fermare. non riescoa individuare la riga del css che fa questo

PHP:
#main {text-align: center; white-space:nowrap;}
#main ul {list-style: none; padding: 0}
#main li {
display: inline-block;
position: relative;
width:120px;
height: 23px;
padding:0 20px;
background-color:#0077B0;
background:url(img/li_bg.jpg) repeat-x top left;
border-left:5px solid #6D818A;
border-right:1px solid #6D818A;
cursor:pointer;
line-height: 23px;
}
#main li li li {
width:200px;
text-align:left;
}
#main ul ul {display: none; position: absolute; z-index: 9;}
#main li:hover > ul, #main li li {display: block}
#main li a{
text-decoration:none;
color:#272F32;
font-weight:bold;
font-size:11px;
text-transform:none;
letter-spacing:1px;
}


#main li:hover{
background-position:bottom;
}
#main ul ul ul {left: 100%; top: 0}
#main ul ul ul li:first-child > a {border-radius: 0 5px 0 0}
#main ul li:hover ul, #main ul ul li:hover ul{
visibility:visible;
}
#credit{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
#main li li{ 
background:url(img/li_li_bg.jpg) repeat-x top left;
text-align:left;

}
 

Discussioni simili