求老师告诉我如何在作业的基础上给导航栏添加下拉列表

求老师告诉我如何在作业的基础上给导航栏添加下拉列表

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你是想要实现点击顶部右侧导航,出现下拉菜单的效果吗?可以将下拉菜单用绝对定位的方式定到相应位置隐藏,写点击事件,再让下来菜单显示出来。

  • 孙大剩丶 提问者 #1
    想要的效果是,鼠标在菜单悬浮出现下拉菜单。 还有能具体给我代码参考吗?就基于作业的代码, 万分感谢
    2018-03-28 11:43:06
  • 好帮手慕星星 回复 提问者 孙大剩丶 #2
    在源代码上添加的效果代码是没有的哦,给你写了一个使用:hover伪类的方式,实现下拉菜单,可以照着这个布局方式来,自己要动手做一做哦,参考: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } ul, li { list-style: none; } header { width: 1000px; height: 100px; background-color: #000; line-height: 100px; margin: 0 auto; } ul.link { text-align: center; } ul.link>li { position: relative; float: left; width: 80px; margin: 0 20px; color: #fff; } ul.link .list { position: absolute; top: 100px; left: 0; width: 80px; color: #000; display: none; } ul.link>li:hover .list { display: block; } </style> </head> <body> <header> <ul class="link"> <li> <span>首页</span> <ul class="list"> <li>aa</li> <li>aa</li> </ul> </li> <li> <span>免费</span> <ul class="list"> <li>bb</li> <li>bb</li> </ul> </li> </ul> </header> </body> </html>
    2018-03-28 13:42:36
  • 孙大剩丶 提问者 回复 好帮手慕星星 #3
    我套用到我的里面还是不能实现啊,有更好的交流方式吗? 因为最近我再弄一个完整的网页,问题挺多的,在mooc这样问答太不方便了。
    2018-03-28 14:33:12
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师