生活随笔
收集整理的這篇文章主要介紹了
二级下拉菜单缓慢渐变
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
二級下拉菜單緩慢漸變
transition屬性與display屬性相沖突，不能使用這兩種屬性達到漸變效果。
transition屬性與height屬性結合，
初始時二級菜單高度為0， 通過溢出隱藏，使整個二級菜單在一開始就整個隱藏，
當鼠標懸停在一級菜單某項上時，通過高度的漸變，溢出部分逐漸減少，讓二級菜單隨著高度變化而顯示出來， 達到二級下拉菜單緩慢漸變的效果。
<!DOCTYPE html
><html lang
="en" >
<head
><meta charset
="utf-8" /><title
>HTML實驗
1</title
><style
>*{margin
:0px
;padding
:0px
;}header
{background
:#b6ff00
;width
:100%;height
:100px
;margin
-bottom
:10px
;position
:relative
;}nav
{position
:absolute
;bottom
:5px
;left
:600px
;cursor
:pointer
;}ul
{list
-style
:none
;}ul li
{float
: left
;background
:#b200ff
;text
-decoration
:none
;color
:#ffffff
;font
-weight
:bold
;display
:block
;line
-height
:40px
;padding
:0px
10px
;}ul li a
:hover
{background
:#
0094ff
;}ul li ul
{position
: absolute
;height
:0;overflow
:hidden
;background
: #b200ff
;color
: #ffffff
;}ul li
:hover ul
{height
:160px
;transition
:all
2s
;}#section
{background
:#ff6a00
;width
:100%;height
:800px
;}</style
>
</head
>
<body
><header
><nav
><ul
><li
>視頻
<ul
><li
><a href
="https://www.bilibili.com/"target
="_blank">bilibili
</a
></li
><li
><a href
="https://v.qq.com/" target
="_blank">騰訊視頻
</a
></li
><li
><a href
="https://www.iqiyi.com/"target
="_blank">愛奇藝
</a
></li
><li
><a href
="https://www.youku.com/">優酷
</a
></li
></ul
></li
><li
>問答
<ul
><li
><a href
="https://www.zhihu.com/signin?next=%2F"target
="_blank">知乎
</a
></li
><li
><a href
="https://www.csdn.net/">CSDN</a
></li
></ul
></li
></ul
></nav
></header
><!--網頁頭部里嵌套一個導航欄，由ul列表組成，利用ul嵌套構成一個二級的下拉菜單，當鼠標移動到相應的一級菜單項，將會展開對應的二級菜單，利用transition屬性使二級菜單緩緩展開，
--><section id
="section"></section
>
</body
>
</html
>
總結
以上是生活随笔為你收集整理的二级下拉菜单缓慢渐变的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
