Menu boczne z box-shadow (Lydia)

Podgląd jest powyżej, ale trudno jest go przedstawić za pomocą rysunku. Ogólnie chodzi o to, że na ramkę najeżdżają dwa cienie. Jeden z lewej strony i góry, a drugi z prawej i dołu. Na koniec zakrywają ramkę zmieniając jej kolor.

#PageList1 li a:link, #PageList1 li a:visited {
color: #FFFFFf; /*kolor czcionki*/
background:  #8EBD00; /*kolor tła*/
text-align: center; /*wyśrodkowanie tekstu*/
font-size: 12px; /*wielkość czcionki*/
font-family: Century Gothic; /*czcionka*/
letter-spacing: 2px; /*odstępy między literami*/
text-decoration: none; /*brak podkreślenia*/
display: block; /*element jest na całą szerokość*/
padding: 4px; /*marginesy - tekst nie przykleja się do ramek*/
border-radius: 10px; /*zaokrąglone ramki*/
margin: -6px 10px; /*marginesy, pierwszy zmienia odstępy pomiędzy ramkami, a drugi zmienia ich szerokość*/
transition:all 0.5s; /*płynny powrót*/
-moz-transition:all 0.5s; /*płynny powrót*/
-webkit-transition:all 0.5s; /*płynny powrót*/
-o-transition:all 0.5s; /*płynny powrót*/
}
#PageList1 li a:hover {
color: #8EBD00 !important; /*zmiana koloru  czcionki*/
box-shadow: -220px -20px 0px #F2F5E8 inset, 220px 20px 0px #F2F5E8 inset; /*cień (pierwsza liczba oznacza boki, a druga górę i dół)*/
text-decoration: none; /*brak podkreślenia*/
transition:all 0.5s; /*płynne przejście*/
-moz-transition:all 0.5s; /*płynne przejście*/
-webkit-transition:all 0.5s; /*płynne przejście*/
-o-transition:all 0.5s; /*płynne przejście*/
}

Pogrubione części można zmieniać.