多级菜单

<style>

/*菜单外观*/
.xmenu {border: 1px solid white;border-bottom: none;}
.xmenu li a {padding: 1em 2em;text-decoration: none;	color: white;}
.xmenu li a {border-right: 1px solid #3c3c3c;border-left: 1px solid #292929;border-bottom: 1px solid #232323;border-top: 1px solid #545454;}

.xmenu li a {
    background: #292929;
	background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
	background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
}
.xmenu li a:hover {
	background: #2a0d65;
	background: -moz-linear-gradient(top, #11032e, #2a0d65);
	background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}


/* 箭头样式 */
.arrow-down {display:inline-block;width:0;height:0;vertical-align:top;border-top:4px solid #fff;border-left:4px solid transparent;border-right:4px solid transparent;margin-top:7px; margin-left:3px;}
.arrow-right {display:inline-block;width:0;height:0;vertical-align:top;border-top:4px solid transparent;border-left:4px solid #fff;border-right:4px solid transparent; border-bottom:4px solid transparent; margin-top:5px; margin-left:5px;}

</style>

<ul class="xmenu">
	<li><a href="">菜单1</a></li>
	<li>
		<a href="">菜单2 <b class="arrow-down"></b></a>
		<ul>
			<li><a href="">下拉2-1</a></li>
			<li><a href="">下拉2-2</a></li>
			<li>
				<a href="">下拉2-3 <b class="arrow-right"></b></a>
				<ul>
					<li><a href="">右拉1</a></li>
					<li><a href="">右拉2</a></li>
					<li><a href="">右拉3 <b class="arrow-right"></b></a>
						<ul>
							<li><a href="">右拉1-1</a></li>
							<li><a href="">右拉1-2</a></li>
							<li><a href="">右拉1-3</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="">菜单3</a></li>
	<li><a href="">菜单4</a></li>
	<li><a href="">菜单5</a></li>
</ul>



    

• 菜单1
• 菜单2
  • 下拉2-1
  • 下拉2-2
  • 下拉2-3
    • 右拉1
    • 右拉2
    • 右拉3
      • 右拉1-1
      • 右拉1-2
      • 右拉1-3
• 菜单3
• 菜单4
• 菜单5