通过定位实现二级菜单：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <link rel="stylesheet" href="./ret.css"> <style> .clearfix::after { content: ""; display: block; clear: both; } .header { height: 40px; background-color: #e3e4e5; } .header .nav>li{ float:left; margin:0 20px; width:150px; 李克农将军 text-align:center; line-height:40p怎么点亮qq音乐图标x; height:40px; box-sizing: border-box; position:relative; } .header .nav>li:hover{ line-height:38px; border:1px solid #ccc; bo木须肉的做法rder-bottom:none; background-color: #fff; } .header .nav>li:hover::after{ content:""; display:block; width:100%; height:1px; background:#fff; position: absolute; top:38px; } .header .nav>li:hover .condnav{ width:300px; border:1px solid #ccc; position:absolute; right:-1px; text-align:left; display:block; } .header .nav>li .condnav{ display:none; } 采访老师 </style></head><body> <header class="header"> <ul class="nav clearfix"> <li><a href="">lorem.</a></li> <li><a href="">culpa.</a></li> <li><a href="">conquuntur?</a></li> <li> <a href="">客户服务</a> <di司法考试报名v class="condnav"> lorem ipsum dolor sit amet, conctetur adipisicing elit. numquam deleniti voluptate fugit distinctio, totam iure delectus aliquam aspernatur amet hic. </div> </li> <li><a href="">ex.</a></li> </ul> </header></body></html>代码中的ret.css文件，参考下面网站：/d/file/titlepic/12663192.html
本文发布于:2023-04-03 17:38:43，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/6bd35e92ce5bacce9b5ad762cd01a9ad.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：5.通过定位实现二级菜单.doc
本文 PDF 下载地址：5.通过定位实现二级菜单.pdf
| 留言与评论（共有 0 条评论） |
