最赞回答 / 南埝陈陈
.nav li a{display:block; height:30px;text-align:center;
line-height:30px; width:120px;
background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg) no-repeat ;
margin-left:1px;}你试着加上"no-repeat"，就会发现只有-30px可以，30px就没背景了。
2016-08-06
已采纳回答 / 慕后端9334592
这个和水平伸缩的那个是相似的，只不过水平的改变的是宽度，这个改变的是高度。我们让一级菜单水平排列，让二级菜单垂直排列，并且将二级菜单隐藏，绝对定位到所选菜单之下。之后我们就开始用js制作鼠标移入移出时发生的动画效果，鼠标移入时，我们想让二级菜单有一定的速度缓慢下拉显示，并且向下延伸的高度是一定的，延伸动作和速度控制都可以用setInterval来实现，延伸可以写一个匿名函数，让他获取当前高度并改变成我们想要的高度，这个时候就必须有个判断，当高度达到一定的值就要停止延伸了；然后设定一个速度就ok了。鼠标移出...
2016-08-05
看不懂本节的请直接跳过，学习完JS与JQUERY基础后再回头，效果特好。
$(function(){
$('.nav>li').hover(
function(){
$('ul',this).stop().animate({'height':'120px'},500,'linear')
},
function(){
$('ul',this).stop().animate({'height':'0px'},500,'swing')
})
})
$(function(){
$('.nav>li').hover(
function(){
$('ul',this).stop().animate({'height':'120px'},500,'linear')
},
function(){
$('ul',this).stop().animate({'height':'0px'},500,'swing')
})
})
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高