Modifica di css di un menu a tendina

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:

Monital

Utente Attivo
15 Apr 2009
778
2
18
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:

Monital

Utente Attivo
15 Apr 2009
778
2
18
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?
 

Monital

Utente Attivo
15 Apr 2009
778
2
18
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
Autore Titolo Forum Risposte Data
M Modifica css Joomla 2
A Domanda sulla modifica di CSS esistenti HTML e CSS 1
Monital script per modifica css con tabella colori html PHP 6
J Modifica CSS HTML e CSS 1
P Pagina modifica record che non funziona PHP 0
L Modifica file upload in ASP Classic ASP 2
P modifica colore A Hover link website . WordPress 2
P Modifica con PHP di un node in una sitemap xml PHP 0
C Software modifica sitoweb in tempo reale WordPress 12
G Modifica immagine di sfondo attraverso un bottone PHP 18
L modifica dati. PHP 1
G modifica corretta funzione da eregi() a preg_match() PHP 3
R Modifica codice per l'upload di più file PHP 0
G Modifica testo Photoshop 3
felino Excel: popolare una cella con la data di modifica della riga a cui appartiene Windows e Software 3
felino [Wordpress] Modifica main color del template WordPress 8
M [PHP] Modifica account PHP 3
S [OFFRO] Creazione di programmi per la modifica automatizzata di testi Offerte e Richieste di Lavoro e/o Collaborazione 0
S [OFFRO] Rimozione o aggiunta di Password ai file PDF e opzionalmente loro modifica Offerte e Richieste di Lavoro e/o Collaborazione 2
F [PHP] modifica del body email con checked PHP 8
G Modifica da sito statico HTML a dinamico in Wordpress SEO e Posizionamento 1
Cosina Modifica script textarea jQuery 0
M [PHP] Calcolare costi su modifica orari PHP 4
A [PHP] Modifica caratteri di una query Oracle SQL PHP 0
F modifica recensione google Discussioni Varie 2
C Photoshop CS 6 salvare una modifica Photoshop 0
L [PHP] Modifica in tabella ultimo id PHP 5
C Pagina fb notifica modifica post Social Media Marketing 1
Q Notice: Undefined index: codice in C:\xampp\htdocs\STAGE\calendario\modifica.php on line 10 PHP 8
C [Joomla] [HTML] Modifica codice per adattamento app Joomla 18
Daniele_Carrara [Javascript] Modifica input date Javascript 5
J modifica spooler di stampa per stampare in ordine di nome i files pdf Windows e Software 2
Emix [PHP] Ricerca e modifica su due tabelle PHP 26
M [PHP] Tabella datagrid con icona di modifica che cambia in base a parametro PHP 0
Andrea1981 [WordPress] [HTML] Help modifica credits nel footer.Tema Customizr. WordPress 5
K [Visual Basic] Stampa e modifica record non funziona più Visual Basic 0
K [ASP.Net] Problema stampa e modifica ms sql ASP.NET 0
K stampa e modifica tabella in php e ms sql PHP 2
Michaelweb93 [WordPress] [HTML] Modifica sezione - pagina sito web WordPress 1
A [PHP] [RISOLTO] Modifica record db da form PHP 11
T [PHP] piccola modifica a script (non mio...) PHP 8
P Cerco programmatore per modifica sito wordpress Offerte e Richieste di Lavoro e/o Collaborazione 4
Z Modifica ricorsiva file html HTML e CSS 3
Trapano [PHP] modifica simultanea di più campi nel db PHP 1
K [CERCO] Programmatore per modifica tema wp Offerte e Richieste di Lavoro e/o Collaborazione 2
U modifica sender-receiver email Posta Elettronica 4
W modifica firma Supporto Mr.Webmaster 20
M Modifica parametro mysql_result($result, $i, 'id') Deprecato dal 5.5 PHP 10
X modifica contemporanea di record MS Access 6
J [WP] Chiarimenti modifica campo WordPress 0

Discussioni simili