登录

html5 - 纯CSS怎么做出这种一模一样的导航条导航块那里还有个下拉菜单,请大家指导一下

# HTML
高洛峰高洛峰2166 天前1102 次浏览

全部回复(5) 我要回复

  • 怪我咯

    怪我咯2017-04-17 14:49:50

    p.title>p.list
    .list{
    display:none;
    }
    .title:hover .list{
    display:block;
    }
    原理大概就是使用css伪类来达到hover状态响应,从而改变下拉内容的显示。

    回复
    0
  • 阿神

    阿神2017-04-17 14:49:50

    下拉菜单,如果是css的话,可以直接用父class:hover 子class然后设置opacity:1甚至可以加上过渡效果。

    回复
    0
  • 黄舟

    黄舟2017-04-17 14:49:50

    利用css的伪类来实现class:hover,如果要使用过渡,那就有好几种办法了

    回复
    0
  • 高洛峰

    高洛峰2017-04-17 14:49:50

    使用浏览器开发工具就可以查看其代码结构,爱奇艺是点击事件监听,把下拉菜单由display:none;改成display:block;用CSS的话,就只能使用伪类实现吧,楼上的回复那样。

    回复
    0
  • PHP中文网

    PHP中文网2017-04-17 14:49:50

    完全使用CSS只能做出一模一样的样式,但是所有的点击事件必须用js来完成。

    回复
    0
  • 取消回复发送