Membuat Radial Menu dan Sub

Trik membuat sesuatu di pojokan dipadukan dengan membuat menu akan menghasilkan Radial Menu & Sub! Apakah yg dimaksud dengan radial menu & sub? Sebuah menu dengan kedudukan di pojok kanan, plus sub menu dengan gaya radial (bulat-bulat) Agak ada kemiripan dengan bikin menu pinggiran pake CSS3. Karena radial menu lumayan extreme dalam penggunaan kode CSS, oleh sebab itu harap lakukan

Download full template

.nav {
position: fixed;
right: 0;
top: 0;
}
.nav:hover {
/*background-color: rgba(0, 0, 0, 0.4);*/
width: 15em;
height: 15em;
border-radius: 0 0 0 15em;
}
.nav h1 {
position: relative;
top: -.65em;
right: -.5em;
margin: 0;
background-color: #000;
color: #000;
z-index: 1;
font-size: 2em;
line-height: 100%;
width: 1em;
padding: 1em .5em 1.25em 1em;
border-radius: 3em 0 0 3em;
transform: rotate(-45deg);
overflow: hidden;
}
.nav h1::before {
content: "\AB";/*« «*/
color: #fff;
transform: rotate(-45deg);
}
.nav:hover h1 {
display: none;
}
.nav ol {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav a {
display: block;
position: absolute;
top: -10em;
right: 0;
border-radius: 4.5em;
border: .15em solid #fff;
padding: 1.67em 0;
width: 4.5em;
text-align: center;
transition: all 0.2s ease-in;
}
.nav:hover a { /*display: block;*/ }
a:link, a:hover, a:focus, a:active, a:visited {
text-decoration: none;
color: #ddd;
background-color: #000;
}
a:hover, a:focus, a:active {
background-color: #222;
color: #fff;
text-shadow: 0 0 .2em rgba(255, 255, 255, 0.8);
}
.nav:hover>ol>li:nth-child(1) a {
right: 13.5em;
top: .2em;
z-index: 5;
}
.nav:hover>ol>li:nth-child(2) a {
right: 12em;
top: 4.75em;
}
.nav:hover>ol>li:nth-child(3) a {
right: 9em;
top: 8.5em;
}
.nav:hover>ol>li:nth-child(4) a {
right: 4.75em;
top: 11em;
}
.nav:hover>ol>li:nth-child(5) a {
right: 0;
top: 12em;
}

/* First sub-menu */
.nav ol li:nth-child(1) ol {
background-color: rgba(0, 0, 0, 0.6);
display: block;
position: absolute;
top: -5em;
right: 8.5em;
z-index: 1;
border-radius: 15em;
}
.nav ol li:nth-child(1):hover ol {
width: 15em;
height: 15em;
top: -5em;
right: 8.5em;
z-index: 5;
}
.nav:hover ol li:nth-child(1) ol li a {
z-index: 3;
border-color: #fff;
top: 5.2em;
right: 5em;
}
.nav:hover ol li:nth-child(1) a:hover li:nth-child(1) a, .nav:hover ol li:nth-child(1) ol:hover li:nth-child(1) a {
right: 10em;
top: 5.2em;
}
.nav:hover ol li:nth-child(1) a:hover li:nth-child(2) a, .nav:hover ol li:nth-child(1) ol:hover li:nth-child(2) a {
right: 7.5em;
top: 9.5em;
}
.nav:hover ol li:nth-child(1) a:hover li:nth-child(3) a, .nav:hover ol li:nth-child(1) ol:hover li:nth-child(3) a {
right: 2.5em;
top: 9.5em;
}
.nav:hover ol li:nth-child(1) a:hover li:nth-child(4) a, .nav:hover ol li:nth-child(1) ol:hover li:nth-child(4) a {
left: 10.2em;
top: 5.2em;
}

Kode HTML<div class="nav">
<h1 onclick = "void(0);">Menu</h1>
<ol>
<li><a href="#">Title 1</a>
<ol onclick = "void(0);">
<li><a href="#">Sub title 1</a></li>
<li><a href="#">Sub title 2</a></li>
<li><a href="#">Sub title 3</a></li>
<li><a href="#">Sub title 4</a></li>
</ol>
</li>
<li><a href="#">Title 2</a></li>
<li><a href="#">Title 3</a></li>
<li><a href="#">Title 4</a></li>
<li><a href="#">Title 5</a></li>
</ol>
</div>Bagaimana hasilnya?

http://jsbin.com/uleloq
Resource by: jsdo.it
Happy radial \m/