JQuery Menu could be useful when seperated exapandable icon is needed.
"Jquery menu uses simple, cross browser compatible jquery to transform your multilevel menus into click and expand menus. Yes this module is similar to dhtml menus and active menus, but it is different in a couple of key ways." said on the Drupal site.
Unfortunately, JQuery menu doesn't support IE6 and IE7 browser. when click the expand button, the icon's position is fixed instead of expanding with other menu items. so you need to theme for IE browser.
The above issue is just related to my theme. If you have similar issue, you could use this css IE hack.
You can ignore the specific margin and width for your theme.
On IE6, JQuery menu display strangely.
CSS For IE 7
html *{
zoom: 1 ;
} // IE hack..
ul.jquerymenu > li.parent,
ul.jquerymenu > li
{
padding-left: 0px;
list-style-position: outside;
}
ul.jquerymenu li.parent span,
ul.jquerymenu li span.leaf
{
display: block;
margin-left: 0px;
}
#sidebar-left .block ul.menu li span{
margin-top: 1px;
}
ul.jquerymenu li.open ul{
padding-left: 4px;
}
ul.jquerymenu li.open ul li{
list-style-position: outside; // Ie browser need to set up
margin-left: 20px;
}
For IE 6 patch
ul.jquerymenu > li.parent,
ul.jquerymenu > li
{
padding-left: 0px;
list-style-position: outside;
}
ul.jquerymenu li.parent span,
ul.jquerymenu li span.leaf
{
display: block;
margin-left: 0px;
}
ul.jquerymenu li.open ul{
padding-left: 4px;
}
ul.jquerymenu li.open ul li{
list-style-position: outside;
margin-left: 20px;
}
ul.jquerymenu li.open,
ul.jquerymenu li.closed,
ul.jquerymenu li{
list-style-position: outside;
padding-left: 0px;
}
ul.jquerymenu li.open ul{
padding-left: 7px;
}