Buongiorno,
desidero ringraziarla per i suggerimenti.
Certo non è bello sentirsi dire "..... si possono individuare diversi punti in cui si presenta una cattiva progettazione ", considerando le ore che ho perso anche solo per scrivere quello che ho scritto, ma non mi perdo d'animo e ringrazio sempre chi mi aiuta.
Bisogna anche ammettere che l'uso corretto dei CSS non è per niente una cosa facile o scontata.
Una delle difficoltà, a mio avviso, è quella che per fare cose simili o uguali si possono usare decine e decine di modi diversi. Ad esempio se lei guarda su internet tutti quelli che espongono degli esempi di Menù orizzontali ad almeno tre livelli potrà notare che non esiste uno uguale ad un altro e la fantasia e la contorsione regna sovrana.
Tutto questo non fa che confondere chi sta cercando di imparare ad usare correttamente un linguaggio nuovo.
Detto questo ho cercato di fare quello che lei mi ha detto, ammesso che abbia capito (di seguito il codice).
Quello che adesso non funzione è che se scorro il menu verticalmente con il mouse tutto funziona, ma quando arrivo all'ultimo "Livello 2" mi sparisce il menù e non riesco a cliccare la voce.
Infine se ci si posiziona tra menù 1 e menù 2 la zona rimane sensibile al :hover, questo perchè il sistema assume che non è un bottone l'area sensibile ma tutta un'area dettata dalla presenza di witdth: 200px su .menu li.
Non sono riuscito a risolvere questi problemi.
Come ultima cosa le chiedo, per non continuare a disturbare, se esiste una forma di assistenza a pagamento dove si può essere assistiti con questa modalità o altro simile.
Ringrazio ancora e rimango in attesa di un cortese riscontro.
codice HTML:<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style TYPE="text/css" MEDIA="only screen and (min-width: 850px)"> .menu li { list-style: none; width: 200px; float: left; font-family: Oswald, sans-serif; } .menu li a { background-color: #9A9A9C; padding: 4px 15px; text-decoration: none; color: green; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .menu li a:hover { background-color: #9A9A9C; color: white; } .menu li:hover .smenu { display: block; /* padding: 4px 15px; */ /* width: 150px; */ } li ul li:nth-child(odd) { margin-top: 10px; } li ul li:nth-child(even) { margin-top: 10px; } .smenu { display: none; padding: 4px 0px; border: 0!important; width: 150px!important; background-color: #9A9A9C; border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } .smenu2 { display: none; padding: 4px 0px!important; border: 0!important; width: 150px!important; border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .smenu ul { display: none; } .smenu:hover .smenu2 { display: block; background-color: #9A9A9C; color: black; padding: 4px 15px; width: 150px; } </style> </head> <body> <div class="menu"> <ul> <li><a href="#">Menu 1</a> <ul> <li class="smenu"><a href="#">Anagrafica xxxxx</a> <ul class="smenu2" > <li><a href="#">Livello 3</a></li> <li><a href="#">Livello 3</a></li> <li><a href="#">Livello 3</a></li> </ul> </li> <li class="smenu"><a href="#">Livello 2</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li class="smenu"><a href="#">Livello 2</a></li> <li class="smenu"><a href="#">Livello 2</a> <ul class="smenu2"> <li><a href="#">Livello 3</a></li> <li><a href="#">Livello 3</a></li> <li><a href="#">Livello 3</a></li> </ul> </li> <li class="smenu"><a href="#">Livello 2</a></li> </ul> </li> </ul> </div> </body> </html>
Rispondi quotando