JSFiddle - React, Tailwind, and code Playground
by ASHISH ROX
HTML
<div class="menuHoldermbs"><div class="menuWindow">
<ul class="p1">
<li class="s1"><a href="#url">Menu</a>
<ul class="p2">
<li class="s2"><a href="http://mybloggerskill.blogspot.com"><span>Home</span></a></li>
<li class="s2"><a href="#url"><span>Services</span></a>
<ul class="p3 a3">
<li><a href="http://mybloggerskill.blogspot.com">Logo</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Editing</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Storage</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>Contacts</span></a>
<ul class="p3 a6">
<li><a href="http://mybloggerskill.blogspot.com">Support</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Sales</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Buying</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Photographers</a></li>
<li><a href="mybloggerskill.blogspot.com">Stockist</a></li>
<li><a href="http://mybloggerskill.blogspot.com">General</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>Stores</span></a>
<ul class="p3 a3">
<li><a href="http://mybloggerskill.blogspot.com">South Region</a></li>
<li><a href="http://mybloggerskill.blogspot.com">North Region</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Central Region</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>Contact Us</span></a>
<ul class="p3 a3">
<li><a href="http://mybloggerskill.blogspot.com">Email</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Post</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Telephone</a></li>
</ul>
</li>
<li class="s2 b6"><a href="#url"><span>Sales</span></a>
<ul class="p3 a5">
<li><a href="http://mybloggerskill.blogspot.com">DSLR Cameras</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Lenses</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Flash...CSS
/* ===============================================================
copyright © zifana.com
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menuHoldermbs {width:100px; height:100px; margin:50px 0 250px 10px; position:relative; z-index:100;}
.menuHoldermbs ul {padding:0; margin:0; list-style:none; position:absolute; left:0; top:0; width:0; height:0;}
.menuHoldermbs ul li {border-radius:0 0 300px 0; width:0; height:0;}
.menuHoldermbs ul li a {color:#000; text-decoration:none; font:bold 13px/30px arial, sans-serif; text-align:center; box-shadow:-5px 5px 5px rgba(0,0,0,0.4);
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
}
.menuHoldermbs ul.p1 li {position:absolute; left:0; top:0;}
.menuHoldermbs ul.p2 {z-index:-1;}
.menuHoldermbs ul.p3 {z-index:-1;}
.menuHoldermbs li.s1 > a {position:absolute; display:block; width:100px; height:100px; background:#c8c8c8; border-radius:0 0 100px 0;}
.menuHoldermbs li.s2 > a {position:absolute; display:block; width:100px; padding-left:100px; height:200px; background:#ddd; border-radius:0 0 200px 0;}
.menuHoldermbs ul.p3 li a {position:absolute; display:block; width:100px; padding-left:200px; height:300px; background:#999; border-radius:0 0 300px 0;}
.menuHoldermbs ul ul {
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:rotate(90deg);
-moz-transform:rotateZ(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
.menuHoldermbs li.s2:nth-of-type(6) > a...