<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>垂直菜单</title>
		<style>
		要注意的:
		/*1. 不要直接给li设置padding,可以在这样导致border也跟着变小
		可以考虑在li中嵌入标签解决
		  2.在插入图片时，li的高度最好等于图片本身高度，不然下拉背景会溢出
		*/
		
			body,
			html,
			ul {
				padding: 0;
				margin: 0;
			}
			
			ul {
				list-style-type: none;
			}
			
			ul li {
				border-bottom: solid 1px gray;
				background: #EEEEEE;
			}
			
			a {
				text-decoration: none;
				color: black;
				padding-left: 20px;
			}
			
			.menu {
				margin: 30px auto;
			}
			
			.main {
				/*background: url(main_bg.png);*/
				background: -webkit-linear-gradient(left, gray, black);
				background-color: #EEEEEE;
				line-height: 37px;
				width: 200px;
				background-repeat: repeat-x;
				position: relative;
			}
			
			.main ul li {
				/*margin-left: -20px;*/
				/*padding-left: 30px;*/
			}
			
			.main ul {
				display: none;
			}
			
			.main span {
				display: block;
				border: 7px solid white;
				border-bottom: 7px solid transparent;
				border-right: 7px solid transparent;
				border-top: 7px solid transparent;
				width: 0;
				height: 0;
				position: absolute;
				top: 11px;
				left: 6px;
			}
			
			.menu.horizontal {}
			
			.menu.horizontal .main {
				float: left;
			}
			
			.menu.horizontal:after {
				content: '';
				display: block;
				overflow: hidden;
				clear: both;
			}
		</style>
		<script src="../jquery-2.2.4.min.js"></script>
		<script>
			$(window).load(function() {
				$('.main').on('click', function() {
					var _this = $(this);
					_this.children('ul').slideToggle();
				});
				
				$('.horizontal .main').hover(function() {
					var _this = $(this);
					_this.children('ul').slideDown();
				},function(){
					var _this = $(this);
					_this.children('ul').slideUp();	
				});
			})
			
			/*判断并改变图片*/
			function changeIcon(mainNode){
				if(mainNode){
					if(mainNode.css('background-image').indexOf('ag.png')>=0){
						mainNode.css('background-image','url(../../1.png)')
					}else{
						
					}
				}
			}
		</script>
	</head>

	<body>
		<div class="containner">
			<ul class="menu">
				<li class="main">
					<span></span> <a href="#">主菜单1</a>
					<ul>
						<li><a href="#">菜单1</a></li>
						<li><a href="#">菜单2</a></li>
						<li><a href="#">菜单3</a></li>
					</ul>
				</li>
				<li class="main">
					<span></span> <a href="#">主菜单2</a>
					<ul>
						<li><a href="#">菜单1</a></li>
						<li><a href="#">菜单2</a></li>
						<li><a href="#">菜单3</a></li>
					</ul>
				</li>
				<li class="main">
					<span></span> <a href="#">主菜单3</a>
					<ul>
						<li><a href="#">菜单1</a></li>
						<li><a href="#">菜单2</a></li>
						<li><a href="#">菜单3</a></li>
					</ul>
				</li>
			</ul>
			<br/>
			<ul class="menu horizontal">
				<li class="main">
					<span></span> <a href="#">主菜单1</a>
					<ul>
						<li><a href="#">菜单1</a></li>
						<li><a href="#">菜单2</a></li>
						<li><a href="#">菜单3</a></li>
					</ul>
				</li>
				<li class="main">
					<span></span> <a href="#">主菜单2</a>
					<ul>
						<li><a href="#">菜单1</a></li>
						<li><a href="#">菜单2</a></li>
						<li><a href="#">菜单3</a></li>
					</ul>
				</li>
				<li class="main">
					<span></span> <a href="#">主菜单3</a>
					<ul>
						<li><a href="#">菜单1</a></li>
						<li><a href="#">菜单2</a></li>
						<li><a href="#">菜单3</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

</html>