一段纯 CSS 实现的可用性导航下拉菜单代码,求解读-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

一段纯 CSS 实现的可用性导航下拉菜单代码,求解读

a123456678 2016-03-25 10:49:51 1419

检测发现是 CSS 中 67~73 行的 margin-right:1px; 控制了下拉菜单的可见性。但还是云里雾里,希望能解读一下代码证二级菜单是如何隐藏的,又是如何触发显示的?

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
    margin-right:1px;
    background: black;
}
前端开发
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:13:48

    我把多余代码都删了,然后简化了代码。
    先解释一下目前的结构:

    1. 把 ul.menu 的 overflow:hidden去掉 , .wrapper 设为 margin-top:160px
    2. 现在剩下 about us 这个li,把它设为 绿色 , height: 120px。
    3. "ul.menu li.list 的 margin 改为 -120px -125px 0px 0px (因为默认数字太大不方便看效果。)
    4. a 标签红色,margin-top 改为 120px(为了配合第三步)
      现在页面应该成现在这样(如果我没有漏写什么的话)

    screenshot
    screenshot
    screenshot

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程