JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kopli.pri.ee/area52cms/demo/admin/admin-content/admin-themes/home-base/scripts/jquery.cookie.js"></script>
<ul id="navigation">
    <li>
        <a class="head" href="?p=1">About SfT</a>
        <ul>
            <li><a href="?p=1.1">sub1</a></li>
            <li><a href="?p=1.2">sub2</a></li>
            <li><a href="?p=1.3">sub3</a></li>
            <li><a href="?p=1.4.1">sub4</a></li>
            <li><a href="?p=1.4.2">sub4.1</a></li>
            <li><a href="?p=1.4.3">sub4.2</a></li>
        </ul> 
    </li>
    <li>
        <a class="head" href="?p=1.2">Your Life</a>
        <ul>
            <li><a href="?p=1.2.1">sub1</a></li>
            <li><a href="?p=1.2.2">sub2</a></li>
            <li><a href="?p=1.2.3">sub3</a></li>
            <li><a href="?p=1.2.4">sub4</a></li>
            <li><a href="?p=1.2.5">sub5</a></li>
        </ul> 
    </li>
</ul>

CSS

* { margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-size: small; color: #333 }
#wrapper {
    width:600px;
    margin:0 auto;
    padding-top:100px;
    }
#navBar { 
    height:330px;
    margin-bottom:1em;
}
#navigation {
    margin:0px;
    padding:0px;
    text-indent:0px;
    /*background-color:#EFEFEF;  sublists background color */
    width:200px;
}
#navigation a.head { /* list header */
    height: 40px;
    cursor:pointer;
    background: url(collapsed.gif) no-repeat scroll 3px 4px; /* list header bg color and img settings */
    color:#999;
    display:block;
    font-weight:bold;
    font-size: 22px;
    margin:0px;
    padding:0px;
    text-indent:20px;
    text-decoration: none;
}
#navigation a.head:hover {
    color:#900;
}
#navigation a.selected {
    background-image: url(expanded.gif);
    color:#900;
}
#navigation a.current {
    color: #F60;;
    font-weight:bold;
}
#navigation ul {
    margin:0px;
    padding:0px;
    text-indent:0px;
}
#navigation li {
    list-style:none outside none; 
    /*display:inline;*/
    padding:5px 0 5px 0;
    height:0 auto;
}
#navigation li li a {
    color:#000000;
    display:block;
    font-size:16px;
    text-indent:20px;
    text-decoration: none;
}
#navigation li li a:hover { /* sublist hover state bg and color */
    color:#F60;;
    font-weight:bold;
}

#navigation a.active {background: yellow; border: 2px dotted blue;}

JavaScript

$('#navigation').accordion({
    active: false,
    header: '.head',
    navigation: true,
    event: 'click',
    fillSpace: true,
    animated: 'easeslide'
});

var default_clicked_link = '?p=2'; // This is the default page

$(document).ready(function () {
    // Lets set the active
    if (last_clicked_link = $.cookie('last_clicked_link')) {
        $('a[href="' + last_clicked_link + '"]').addClass('active');
    } else { // ..Or lets set something as default
        $.cookie('last_clicked_link', default_clicked_link, {path: "/"})
        $('a[href="' + default_clicked_link + '"]').addClass('active');
    }
});

$('#navigation a').click(function () {
    
    // Gets the href of the link
    link = $(this).attr('href');
    
    // Sets the new cookie
    $.cookie('last_clicked_link', link, {path: "/"});
    
    // Removes the active class from old last clicked link
    $('.active').removeClass('active');
    
    // Add active class to the new last clicked link
    $(this).addClass('active');
    
    
    return false; // For this example only.. so it woulnt direct
});