![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script src="http://www.clientcide.com/scripts/clientside.moo.v1.2.packed.js"></script> -->
<STYLE>
#menuItem {
PADDING-BOTTOM: 4px; PADDING-LEFT: 4px; WIDTH: 200px; PADDING-RIGHT: 4px; BACKGROUND: #ddd; PADDING-TOP: 4px
}
#smContainer {
PADDING-BOTTOM: 2px; PADDING-LEFT: 4px; WIDTH: 200px; PADDING-RIGHT: 4px; BACKGROUND: #ccc; PADDING-TOP: 0px
}
#smContainer LI {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#smContainer A {
PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; DISPLAY: block; BACKGROUND: #ccc; COLOR: #000; PADDING-TOP: 2px
}
#smContainer A:hover {
BACKGROUND: #eee; COLOR: #000
}
</STYLE>
<DIV id=menuItem>This is a menu item </DIV>
<DIV id=smContainer>
<UL>
<LI><A href="javascript:void()">sub-menu item 1</A>
<LI><A href="javascript:void()">sub-menu item 2</A>
<LI><A href="javascript:void()">sub-menu item 3</A>
<LI><A href="javascript:void()">sub-menu item 4</A> </LI></UL></DIV>
<script defer=defer>
new MenuSlider($('menuItem'), $('smContainer'));
</script>