The code, which you shoul mark as markdown cell to achieve the nice green menu on your right
Custom menu CSS style in a markdown cell 
<style>
    #menu {
        position: fixed;
        right: 0;
        top: 50%;
        width: 15em;
        margin: -2.5em 0 0 0;
        z-index: 5;
        background: hsla(80, 90%, 40%, 0.7);
        color: white;
        font: Georgia, "Times New Roman", Times, serif;
        font-weight: normal;
        font-size: 100%;
        text-align: left;
        border: solid hsla(80, 90%, 40%, 0.5);
        border-right: none;
        padding: 0.5em 0.5em 0.5em 2.5em;
        box-shadow: 0 1px 3px black;
        border-radius: 3em 0.5em 0.5em 3em;
    }
    #menu li { margin: 0 }
    #menu a { color: inherit }

    /* Make menu absolute, not fixed, on IE 5 & 6 */
    #menu { position: absolute }
    *>#menu { position: fixed }
    
    ol.nested
    {
        counter-reset: item
    }
    li.nested
    {
        display: block
    }
    li.nested:before
    {
        content: counters(item, ".") ". ";
        counter-increment: item
    }
</style>

<ol class="nested" id="menu">
    <li class="nested"><a href="#item_1">item 1</a></li>
    <li class="nested"><a href="#item_2">item 2</a>
        <ol class="nested">
            <li class="nested"><a href="#subitem_1">subitem 1</a></li>
            <li class="nested"><a href="#subitem_2">subitem 2</a></li>
        </ol></li>
    <li class="nested"><a href="#item_3">item 3</a>
</ol>