JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>

<ul id="menu">
    <li><a href="javascript: void(0);" class="toggleMenuLink">Sub Menu &gt;</a>
        <ul>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
            <li><a href="javascript: void(0);" class="toggleMenuLink">Testing  &gt;</a>
                <ul>
                    <li><a href="#">Testing</a></li>
                    <li><a href="#">Testing</a></li>
                </ul>
            </li>
            <li><a href="#">Testing</a></li>
        </ul>
    </li>
    <li><a href="http://beben-koben.blogspot.com/">Normal link</li>
    <li><a href="http://www.google.com">Another link</li>
    <li><a href="javascript: void(0);" class="toggleMenuLink">Another Sub Menu &gt;</a>
        <ul>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
            <li><a href="javascript: void(0);" class="toggleMenuLink">Testing &gt;</a>
                <ul>
                    <li><a href="#">Testing</a></li>
                    <li><a href="#">Testing</a></li>
                </ul>
            </li>
            <li><a href="#">Testing</a></li>
        </ul>
    </li>
</ul>

    <p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com">Beben Koben</a></p>
<footer>
    <a class="orig"  href="http://beben-koben.blogspot.com/2011/10/menu-maning-menu-lagi.html" title="GO BACK TO ARTICLE"> &laquo; BACK To</a>

    <h2><a href="">Beben Koben</a></h2>
</footer>

CSS

*
{
    margin:0;
    padding:0;
}
body
{
    background:#debe94;
    color:#000;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 1px #FFFFFF;
    padding:10px;
}
a,a:visited
{
    text-decoration:none;
    outline:none;
    color:#555;
}
a:hover
{
    color:#fff;
}
footer
{
    background:#D3A76F;
    position:fixed;
    width:100%;
    border-top:1px solid #333;
    height:70px;
    bottom:0;
    left:0;
    color:#fff;
    text-shadow:1px 2px 0 #000;
}
footer h2
{
    font:25px/26px Acens;
    font-weight:bold;
    left:70%;
    margin:0px 0 0 150px;
    padding:20px 0;
    position:relative;
    width:400px;
}
footer a.orig,
a.orig:visited
{
-moz-box-shadow:0px 0px 20px #000;
-webkit-box-shadow:0px 0px 20px #000;
box-shadow:0px 0px 20px #000;    
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
    border:none;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred
{
    padding-bottom:15px;
}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:15px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}


#menu { 
color: black; 
text-decoration: none; 
}
#menu a:hover {
color: #a00; 
}
#menu {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}
#menu ul,
#menu ul li ul,
#menu ul li ul li ul,
#menu ul li ul li ul li ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    display: none;
}
#menu li {
    padding-left: 15px;
    background-image: url(http://www.blogger.com/img/triangle_ltr.gif);
    background-repeat: no-repeat;
    background-position: 0 .3em;
}

JavaScript

$(document).ready(function() {
    $('a.toggleMenuLink').click(function() {
        $(this).siblings('ul').toggle('slow');
    });
});