Question

我想让鼠标移上时li的高度增加，移出时恢复。只是效果是高度向下增加的，我想让高度向上增加，css怎么控制

<ul>
<li>寝室管理</li>
<li>工作制度</li>
<li>寝室评比</li>
<li>“四室”管理</li>
<li>安全管理</li>
</ul>
我看到网上的方法是设置position：absolute，bottopm：0px；我的是li标签，感觉会很麻烦，有没有什么简便的方法

Answer 1

ul定位为position：absolute，bottopm：0px，height：auto
ul上层的div为position：relative，高度比ul 略高（高出鼠标悬停时li的高度增加量）。
剩下的就是li鼠标悬停时高度变高。

呃，简单的实现了一下，有问题hi联系。。。
<style>
*{
padding:0px;
margin:0px;
}
#nav{
height:120px;
width:100px;
position:relative;
}
#nav ul{
position:absolute;
bottom:0px;
left:0px;
width:100px;
}
#nav ul li{
height:20px;
line-height:20px;
text-align:center;
list-style:none;
background:#F00;
border-top:1px solid #fff;
}
#nav ul li:hover{
height:30px;
line-height:30px;
}
</style>
<div id="nav">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
</div>

Answer 2

可以加一个hover效果，css代码如下：

<style>
ul li{height:40px;}
ul li:hover{ height:100px;}
</style>

具体高度，根据你的实际需要设置...