AI 助理
备案控制台
开发者社区 问答 正文

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

检测发现是 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;
}

展开
收起
a123456678 2016-03-25 10:49:51 2524 分享 版权

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

1 条回答
写回答
取消 提交回答
  • a123456678

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

    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

    2019-07-17 19:13:48
    赞同 展开评论
问答分类：
前端开发
问答标签：
CSS代码 CSS导航 CSS下拉菜单 CSS实现 CSS导航下拉菜单
问答地址：
开发者社区 > 开发与运维 > 问答
相关问答
CSS 代码的一般格式是怎样的？
66
1
0
在 CSS 代码中，color:green; 这段代码的含义是什么？
338
1
0
mystylc.css的外观代码是什么啊？
474
1
0
视图直接生成的HTML和CSS代码所遇到的难点是什么？
437
1
0
如何用CSS实现背景图片自适应？
595
1
0
css3背景中整个背景图代码是？
502
1
0
CSS中也支持边框的单边样式设定，代码是怎样的？
1894
1
0
如何解决通过style属性编写CSS代码带来的代码杂乱和手动编写等问题？
749
1
0
通过 style 属性编写 CSS 代码会产生哪些问题？
713
1
0
CSS设置背景定位一般通过什么代码来描述？
674
1
0