SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a>
        <ul class="selected">
            <li><a href="#">2.1</a></li>
            <li><a href="#">2.2</a></li>
            <li><a href="#">2.3</a></li>
        </ul>
    </li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a>
        <ul class="selected">
            <li><a href="#">4.1</a></li>
            <li><a href="#">4.2</a></li>
            <li><a href="#">4.3</a></li>
        </ul>
    </li>
    <li><a href="#">5</a></li>
</ul>

CSS

ul:first-child {
    border: 1px solid #666;
    float:left;
}
ul > li > ul {
    display:none;
}

ul > li:hover ul{
    display: block;
}
.showme {
    display: block;
}
ul { padding-left: 20px; }

JavaScript

$(document).ready(function(){

    $("a").each(function () {
        if ( $(this).siblings().size() > 0) 
        {
            $(this).append("<span class='has-child'> has child</span>");

            $(this).click(function (){
              var myUL = $(this).siblings(".selected").toggleClass("showme");
              $("ul").not(myUL).removeClass("showme");
            });

        }
    });

    $('ul > li > ul > li:last-child > a').css('background','yellow');

});