用HTML ul、li标签创建竖向二级菜单

用CSS样式对ul、li标签进行控制，实现竖向二级菜单。

HTML代码：

<div class="sidemenu">
    <ul>
		<li><a href="javascript:void(0);" class="one_level_menubar">一级菜单</a>
			<ul class="two_level_menubar">
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
			</ul>
		</li>
		<li><a href="javascript:void(0);" class="one_level_menubar">一级菜单</a>
			<ul class="two_level_menubar">
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
			</ul>
		</li>
		<li><a href="javascript:void(0);" class="one_level_menubar">一级菜单</a>
			<ul class="two_level_menubar">
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
			</ul>
		</li>
		<li><a href="javascript:void(0);" class="one_level_menubar">一级菜单</a>
			<ul class="two_level_menubar">
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
			</ul>
		</li>
		<li><a href="javascript:void(0);" class="one_level_menubar">一级菜单</a>
			<ul class="two_level_menubar">
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
				<li>-<a href="javascript:void(0);">二级菜单</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS部分：

.sidemenu{
	width:140px;
	height:850px;
	overflow:auto;
	color:#000080;
	float:left;
	line-height:30px;
	font-size:18px;
}
div.sidemenu ul
{
    list-style:none; 
    margin: 0px; 
    padding: 0px; 
}
div.sidemenu ul li
{
    margin-left:5px; 
}
.one_level_menubar
{
	font-weight:bold;	
}
.two_level_menubar
{
	display:none;
	margin-left:8px; 
	font-size:14px;
}
.two_level_menubar li
{
border-left:1px dashed #000000;
}

div.sidemenu ul li a, div.menu ul li a:visited
{
    color: #000000; 
	text-decoration: none; 
    white-space: nowrap; 
   /* margin-left:10px; */
    text-align: center;
}
div.sidemenu ul li a:hover
{
    color: #b22222; 
}

JavaScript/JQuery部分：

$(document).ready(function(){
    $(".one_level_menubar").click(function(){
        $(this).next().slideToggle();
        $(this).parent().siblings().children("ul").slideUp();
    });
});

实现效果：

点击一级菜单，展开二级菜单。