思路:通過給父元素設定固定的寬度和高度以及設置overflow:hidden屬性將超出的ul li列表隱藏掉。視覺上看到的上下滑動的其實是父元素的高度,而不是ul li列表,列表並沒有動過。但視覺上感覺到的就是ul li列表在上下滑動。
完整代碼如下:
<title>下拉菜單滑動效果</title>
<style>
*{
margin:0;
padding:0;
}
.ulList{
width:100px;
height:27px;
overflow:hidden;//將超出固定高度的部分給隱藏起來
margin:auto;
transition:all 0.5s linear;
}
.ulList:hover{
height:137px;//將父元素高度拉長以讓列表包含在內給顯示出來
}
.ulList>li{
list-style:none;
background-color:palegreen;
text-align:center;
border:1px solid black;
height:25px;
line-height:25px;
}
a{
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<ul class="ulList">
<li class="liA">LOVE-Family</li>
<li><a href="">father</a></li>
<li><a href="">mother</a></li>
<li><a href="">brother</a></li>
<li><a href="">and me</a></li>
</ul>
</body>
遇到的問題:中途有給子元素設置懸停讓父元素某個樣式改變時是沒有效果的。可能原因是當設置同一個樣式時父元素的優先級高於子元素,所以在子元素上面改變父元素的樣式是不可以的。