<!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>