我想让鼠标移上时li的高度增加,移出时恢复。只是效果是高度向下增加的...

发布网友发布时间：2024-10-19 12:59

共2个回答

热心网友时间：2024-12-02 03:17

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>

热心网友时间：2024-12-02 03:18

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

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

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