拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...
p.title>p.list.list{display:none;}.title:hover .list{display:block;}原理大概就是使用css偽類來達到hover狀態回應，進而改變下拉內容的顯示。
下拉選單，如果是css的話，可以直接用父class:hover 子class然後設定opacity:1甚至可以加上過渡效果。
class:hover 子class
opacity:1
利用css的偽類來實現class:hover,如果要使用過渡，那就有好幾種辦法了
class:hover
使用瀏覽器開發工具就可以查看其程式碼結構，愛奇藝是點選事件監聽，把下拉式選單由display:none;改成display:block;用CSS的話，就只能使用偽類實作吧，樓上的回覆那樣。
完全使用CSS只能做出一模一樣的樣式，但是所有的點擊事件必須用js來完成。
p.title>p.list
.list{
display:none;
}
.title:hover .list{
display:block;
}
原理大概就是使用css偽類來達到hover狀態回應，進而改變下拉內容的顯示。
下拉選單，如果是css的話，可以直接用父
class:hover 子class然後設定opacity:1甚至可以加上過渡效果。利用css的偽類來實現
class:hover,如果要使用過渡，那就有好幾種辦法了使用瀏覽器開發工具就可以查看其程式碼結構，愛奇藝是點選事件監聽，把下拉式選單由display:none;改成display:block;用CSS的話，就只能使用偽類實作吧，樓上的回覆那樣。