Buongiorno,
purtroppo non riesco a far funzionare :hover per attivare il terzo livello di menù.
chiedo un aiuto per comprendere dove sto sbagliando.
Grazie
Di seguito trovate il codice:
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 a.smenu { display: block; padding: 4px 15px; width: 150px; } li ul li:first-child { margin-top: 10px; } .smenu { display: none; 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; 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); } .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><a class="smenu" href="#">Anagrafica xxxxx</a> <ul> <li><a class="smenu2" href="#">Livello 3</a></li> <li><a class="smenu2" href="#">Livello 3</a></li> <li><a class="smenu2" href="#">Livello 3</a></li> </ul> </li> <li><a class="smenu" href="#">Livello 2</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a class="smenu" href="#">Livello 2</a></li> <li><a class="smenu" href="#">Livello 2</a> <ul> <li><a class="smenu2" href="#">Livello 3</a></li> <li><a class="smenu2" href="#">Livello 3</a></li> <li><a class="smenu2" href="#">Livello 3</a></li> </ul> </li> <li><a class="smenu" href="#">Livello 2</a></li> </ul> </li> </ul> </div> </body> </html>
Rispondi quotando