Vertical menu

HTML

<div class="container">        
            <ul class="">

                <li class="">
                    <a tabindex="-1" href="#">Client Advice</a>
                    <ul class="">

                        <li class=""><a tabindex="-1" href="#">Pre-advice</a></li>
                        <li class=""><a href="#">Strategy & Technical</a></li>
                        <li class=""><a href="#">Research</a></li>
                        <li class="">
                            <a href="#">APL & Products</a>
                            <ul class="parent">
                                <li >
                                    <a href="#">
                                        Approved Product List                                        
                                    </a>

                                    <ul class="child">
                                        <li >Platforms</li>
                                        <li >Managed Funds</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Listed Securities</li>
                                    </ul>

                                </li>
                                <li ><a href="#">Model Portfolios</a></li>
                                <li ><a href="#">Non-approved Products</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#">Implementation</a></li>
                        <li class=""><a href="#">Review</a></li>
                        <li class=""><a href="#">Execution Only</a></li>
                    </ul>
                </li>
                <li ><a href="#">Personal Development</a></li>
                <li ><a href="#">Practice</a></li>
            ...

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
* {box-sizing: border-box;}
.container {
    height:100%;
}
a {
    color:#fff;
    text-decoration:none;
    border-bottom:1px dotted #fff;
    padding:0px 0px 20px 0px;
    width:100%;
    display:block;
    height:100%;
}
li {
    padding:20px 20px 0 20px;
    width:100%;
    color:#fff;
}
.container ul {height:100%;}
.container > ul {
    width:250px;
    background-color:#224490;
    position:relative;
    overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#18316a;
}
.container > ul > li:hover > ul {
    display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
    display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
    border-bottom:1px dotted #fff;
    padding:20px;
}

JavaScript

$('.child').hide(); //Hide children by default

        $('.parent').children().click(function () {
            event.preventDefault();
            $(this).children('.child').slideToggle('slow');
            $(this).find('span').toggle();
        });