segajb,
... вариант
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src='https://code.jquery.com/jquery-latest.js'></script>
<style type='text/css'>
.leftmenu li {list-style:none; }
.leftmenu li span {border:1px solid #96b6c6; border-radius:7px; padding:13px 10px 13px 17px; margin-bottom:4px; background:url('../images/head.jpg') no-repeat 0 0; position:relative; display:block;}
.leftmenu li a {color:#363636; text-decoration:none;}
.leftmenu ul ul {display:none;}
.leftmenu .open {position:absolute; width:26px; height:26px; background:url('../images/open.png') no-repeat 0 0; top:9px; right:12px; z-index:140; cursor:pointer; }
.leftmenu .open:hover, .leftmenu .open.active { background:url('../images/open.png') no-repeat -26px 0; }
.leftmenu li li {margin-left:20px;}
.leftmenu li li span {padding-top:10px; padding-bottom:10px;}
.leftmenu li a:hover, .leftmenu li.active>span>a, .leftmenu li li.active a {text-decoration:underline;}
.open.active{
border: #0033FF 2px solid;
}
</style>
<script type='text/javascript'>
$(function() {
var li = $(".leftmenu li");
li.each(function(indx, el) {
$(".open", el).click(function() {
$(".open").not($(this).toggleClass('active')).removeClass("active");
$("ul", li).not($("ul", el).slideToggle("slow")).slideUp();
})
});
$(".open", li[0]).click() ;
});
</script>
</head>
<body>
<div class="leftmenu"> <ul>
<li><span><a href="#">Пункт меню</a><i class="open">+</i></span>
<ul>
<li><span><a href="#">Под пункт меню</a></span></li>
<li><span><a href="#">Под пункт меню</a></span></li>
<li><span><a href="#">Под пункт меню</a></span></li>
<li><span><a href="#">Под пункт меню</a></span></li>
</ul>
</li>
<li><span><a href="#">Пункт меню</a></span></li>
<li><span><a href="#">Пункт меню</a></span></li>
<li><span><a href="#">Пункт меню</a><i class="open">+</i></span>
<ul>
<li><span><a href="#">Под пункт меню</a></span></li>
<li><span><a href="#">Под пункт меню</a></span></li>
<li><span><a href="#">Под пункт меню</a></span></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
