Menu boczna "słoneczko" (Mia)

Kod css:

#PageList1 a {
text-transform:uppercase;
letter-spacing:2px;
font-family:Calibri;}
#PageList1 {
position:absolute;
top:390px;
left:390px;}

#PageList1 li:first-child a {
position:absolute;
top:-800px;
width: 140px;
left:320px;
height: 100px;
border-radius: 50% 50%;
padding-top: 40px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#9c0034;
border-right: solid;
border-bottom: solid;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #fff;
font-size: 0px;
transform:rotate(60deg);
-webkit-transform:rotate(50deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
margin-top: 11px; }

#PageList1 li:first-child a:hover {
background:#000;
font-size: 11px;
transform:rotate(360deg)
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);}

#PageList1 li:nth-child(2) a {
position:absolute;
top:-860px;
width: 40px;
left:410px;
height:0px;
border-radius: 50% 0%;
padding-top: 40px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#000;/* kolor tła */border-right: solid;
border-bottom: solid;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #fff;
font-size: 0px;
transform:rotate(100deg);
-webkit-transform:rotate(170deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
margin-top: 11px; }

#PageList1 li:nth-child(2) a:hover {
height: 37px;
padding-top: 0px;
background:#243327;
padding-top: -60px;
padding-bottom: -30px;
margin-bottom: 39px;
margin: 20px;
font-size: 11px;
border-radius: 50px;
transform:rotate(360deg)
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);}

#PageList1 li:nth-child(3) a {
position:absolute;
top:-820px;
width: 40px;
left:455px;
height: 0px;
border-radius: 0% 50%;
padding-top: 40px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#9c0034;
border-right: solid;
border-bottom: solid;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #fff;
font-size: 0px;
transform:rotate(100deg);
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
margin-top: 11px; }

#PageList1 li:nth-child(3) a:hover {
height: 37px;
padding-top: 0px;
background:#243327;
font-size: 11px;
border-radius: 50px;
transform:rotate(360deg)
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);}
#PageList1 li:nth-child(4) a {
position:absolute;
top:-770px;
width: 40px;
left:480px;
height: 0px;
border-radius: 50% 0%;
padding-top: 40px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#000;
border-right: solid;
border-bottom: solid;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #fff;
font-size: 0px;
transform:rotate(210deg);
-webkit-transform:rotate(210deg);
-moz-transform:rotate(210deg);
-o-transform:rotate(210deg);
margin-top: 11px;}

#PageList1 li:nth-child(4) a:hover {
height: 37px;
padding-top: 0px;
background:#243327;
font-size: 11px;
border-radius: 50px;
transform:rotate(360deg)
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);}

#PageList1 li:nth-child(5) a {
position:absolute;
top:-720px;
width: 40px;
left:480px;
height: 0px;
border-radius: 0% 50%;
padding-top: 40px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#9c0034;
border-right: solid;
border-bottom: solid;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #fff;
font-size: 0px;
transform:rotate(60deg);
-webkit-transform:rotate(150deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
margin-top: 11px;}

#PageList1 li:nth-child(5) a:hover {
background:#243327;
height: 37px;
padding-top: 0px;
font-size: 11px;
border-radius: 50px;
transform:rotate(360deg)
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);}

Kody praktycznie takie same jak w każdej instrukcji z kółkami czy też kwadratami. Zmieniają się tylko wartości ;). Przy czym PageList1 odpowiada za pierwsze, duże kółko. Każdy następny PageList to "listek" czy też "promyczek", który odchodzi od słoneczka/menu. Zmieniać można oczywiście tło, jak i rozmiar oraz położenie.