Untitled

<div class="mini-menu">   

        <ul>

        <li><a href="#">lorem ipsum</a>

        <ul>

        <li><a href="#">Lorem ipsum submenu 1</a></li>

        <li><a href="#">Lorem ipsum submenu 2</a></li>

        <li><a href="#">Lorem ipsum submenu 3</a></li>

        <li><a href="#">Lorem ipsum submenu 4</a></li>

        </ul>

        </li>

        <li><a href="#">Donec tincidunt laoreet</a></li>

        <li><a href="#">Vestibulum elit</a></li>

        <li><a href="#">Etiam pharetra</a></li>

        <li><a href="#">Phasellus placerat</a></li>

        <li><a href="#">Cras et nisi vitae odio</a></li>

        </ul>

        </div>

.mini-menu{max-width:250px;/*background: #f3f3f3;*/}

.mini-menu ul{

  margin-left:10px;

  padding-left:0px;

  border: 1px solid #e7e7e7;

}

.mini-menu li{list-style:none;padding-left: 14px;font: 14px Verdana,Arial, sans-serif;background:url(http://i.piccy.info/i9/46207f01d95868e4595beba3dde10df8/1407087241/997/714285/menu_non_act.png) no-repeat 5px 14px;

  border-top: 1px solid #e7e7e7;

}

.mini-menu>ul>li:first-child{

  border: none;

}

.mini-menu ul > li > a{display:block;padding: .7em 1em;text-decoration:none;color:#C9C9C9; /*border-bottom: 1px solid #e7e7e7;*/} 

.mini-menu ul > li > ul > li{

  border: none;

  border-top: 1px solid #e7e7e7;

}

.mini-menu ul >li> ul> li> a{}

.mini-menu ul> li> ul{

  width:236px; 

  margin:0 0 0 -14px;

  border: none;

}

$(function() {

$(".mini-menu > ul > li > a").click(function() {

var ul = $(this).next(),

clone = ul.clone().css({"height":"auto"}).appendTo(".mini-menu"),

height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";

clone.remove();

ul.animate({"height":height});

return false;

});

});