Salve a tutti.
Ho un problema con la formattazione delle liste annidate. Ho creato un menu verticale mediante una lista e l'ho formattato in modo tale da variare il colore dello sfondo e della scritta al passaggio del mouse. Un elemento della lista, se premuto, carica una pagina che contiene lo stesso menu con la voce selezionata che si è estesa in un submenu. Vorrei poter dare una formattazione simile anche al submenu (con colori diversi) ma non ci riesco.
Vi posto il codice HTML e CSS per far capire meglio:
Codice CSS:
/* Formattazione Menu Verticale */
ul#navigation {
width: 157px;
/*border: solid 1px #039;*/
margin: 1em;
padding: 0;
}
ul#navigation > li{
list-style:none;
background-color: #ccc;
border-top: solid 1px #039;
text-align: left;
margin: 0;
}
ul#navigation li a {
display: block;
text-decoration: none;
padding: 0;
border-bottom: solid 1px #039f;
border-right: solid 1px #039f;
font-color: blue;
}
li#youarehere > a{
background-color: #fff;
color: #000;
}
li a:link, a:visited {color: #fff;}
li a:hover, a:active {color: #000;}
li a:hover {background-color: #fff;}
/*Formattazione sub-menu */
ul#submenu {
width: 144px;
/*border: solid 1px #039;*/
margin: 1em;
padding: 0;
}
ul#submenu li{
list-style:none;
background-color: #ccc;
border-top: solid 1px #039;
text-align: left;
margin: 0;
}
ul#submenu li a {
display: block;
text-decoration: none;
padding: 0;
border-bottom: solid 1px #039f;
border-right: solid 1px #039f;
font-color: blue;
}
/*li a:link, a:visited {color: #fff;} vorrei poter cambiare questi valori ma non funziona!
li a:hover, a:active {color: #000;}
li a:hover {background-color: #fff;}*/
/*Fine formattazione sub-menu*/
Codice HTML:
<ul id="navigation">[*]Home[*] Menu 1
<li id="youarehere"> Menu2
<ul id="submenu">
[*] Menu2a
[*] Menu2b
[*] Menu2c
[*] Menu2d
[/list]
[*] Menu3[*] Menu4[*] Menu5[*] Menu6 [/list]
Qualche suggerimento?
Thanks!
Rispondi quotando