1、代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>南宁理工学院官网</title> <style> *{ margin:0; padding:0; } .header{ width:100%; height:150px; background-color: #003399; display: flex; align-items: center; justify-content: left; } .box{ width:100%; height:80px; background-color: #002878; display: flex; align-items: center; justify-content: left; } .logo-img{ max-width: 80%; max-height: 80%; object-fit: contain; margin-left: 30px; } .search-input{ width:200px; height:30px; border-radius: 20px; border:1px solid white; background-color: #003399; margin-left: 800px; background-image: url("../img/search.png"); background-position: 10px center; background-repeat: no-repeat; background-size: 20px 20px; padding-left: 35px; color:white; } .search-btn{ width:60px; height:30px; border-radius: 20px; border:1px solid white; background:white; margin-left: 20px; } ul,ol{ list-style: none; } .footer >li{ width: 180px; height:50px; border:none; float: left; line-height: 40px; text-align: center; background-color:#002878; } .footer >li >ol >li{ position:relative; width:100%; height:50px; line-height:40px; text-align: center; } .footer >li >ol >li >ol{ position:absolute; top:0; left:100%; width:180px; display: none; } a{ color:white; font-size:20px; text-decoration-line:none ; } ol{ background-color: #002878; display:none; } .footer > li:hover >ol{ display:block; } .footer > li > ol > li:hover >ol{ display:block; } ol >li:hover{ background-color: #cccccc; } li>ol>li:hover{ background-color: #cccccc; } </style> </head> <body> <form action="学校官网.html" method="get"> <div class="header"> <img src="../img/logo.png" alt="学校logo" class="logo-img"> <input type="text" class="search-input"> <button type="submit" class="search-btn">提交</button> </div> </form> <div class="box"> <ul class="footer"> <li> <a href="https://www.bwgl.cn/index.htm">首页</a> </li> <li> <a href="">学校概况</a> <ol> <li><a href="https://www.bwgl.cn/xxgk/xxbs/A005001001index_1.htm">学校标识</a></li> <li><a href="https://www.bwgl.cn/xxgk/xxjj/A005001002index_1.htm">学校简介</a></li> <li><a href="https://www.bwgl.cn/xxgk/xxld/A005001003index_1.htm">学校领导</a></li> <li><a href="https://www.bwgl.cn/xxgk/xyfg/A005001004index_1.htm">校园风光</a></li> </ol> </li> <li> <a href="">机构设置</a> <ol> <li> <a href="">教学单位</a> <ol> <li><a href="https://sxy.bwgl.cn">商学院</a></li> <li><a href="https://tmygcxy.bwgl.cn">土木工程学院</a></li> <li><a href="https://ysycmxy.bwgl.cn">艺术与传媒学院</a></li> <li><a href="https://wlxy.bwgl.cn">文理学院</a></li> <li><a href="https://xxgcxy.bwgl.cn">信息工程学院</a></li> <li><a href="https://dsjyrgznxy.bwgl.cn">大数据与人工智能院</a></li> <li><a href="https://mkszyxy.bwgl.cn">马克思主义学院</a></li> </ol> </li> <li> <a href="">职能部门</a> <ol> <li><a href="https://dqswb.bwgl.cn">党群事务部(党委组织部、党委宣传部、党委统战部)</a></li> <li><a href="https://xxbgs.bwgl.cn">学校办公室</a></li> <li><a href="https://jjjcs.bwgl.cn">纪检监察室</a></li> <li><a href="https://rsc.bwgl.cn">人事处(党委教师工作部)</a></li> <li><a href="https://cwc.bwgl.cn">财务处</a></li> <li><a href="https://xgc.bwgl.cn">学工处(党委学生工作部)</a></li> <li><a href="https://tw.bwgl.cn">团委</a></li> <li><a href="https://zsc.bwgl.cn">招生处</a></li> <li><a href="https://jwc.bwgl.cn">教务处(教师教学发展中心)</a></li> <li><a href="https://kjc.bwgl.cn">科技处</a></li> <li><a href="https://hqbwc.bwgl.cn">后勤保卫处(党委武装工作部)</a></li> <li><a href="https://twxxglzx.bwgl.cn">图文信息中心</a></li> <li><a href="https://zbcgbgs.bwgl.cn">招标采购办公室</a></li> <li><a href="https://jxjyxy.bwgl.cn">继续教育学院</a></li> <li><a href="https://jjbgs.bwgl.cn">基建办公室</a></li> <li><a href="https://zpzx.bwgl.cn">质量管理与评估中心</a></li> <li><a href="https://gh.bwgl.cn">工会</a></li> </ol> </li> </ol> </li> <li> <a href="https://jwc.bwgl.cn/">教育教学</a> </li> <li> <a href="">招生就业</a> <ol> <li><a href="https://zsc.bwgl.cn">招生</a></li> <li><a href="https://jyw.bwgl.cn">就业</a></li> </ol> </li> <li> <a href="">人才建设</a> <ol> <li><a href="https://www.bwgl.cn/rcjs/rcpx/A005002001index_1.htm">人才培训</a></li> <li><a href="https://www.bwgl.cn/rcjs/rcyj/A005002002index_1.htm">人才引进</a></li> <li><a href="https://www.bwgl.cn/rcjs/rcjs_gbxy/">干部学院</a></li> </ol> </li> <li> <a href="">数字南理</a> <ol> <li><a href="https://x.bwgl.cn/login?r=%2F">智慧校园(学生端)</a></li> <li><a href="https://c.bwgl.cn/union_center/Login/">智慧校园(老师端)</a></li> <li><a href="https://bwgl.yuruixxkj.com/">在线教学平台</a></li> <li><a href="https://bwgl.rurenkj.com/">数字化实训平台</a></li> <li><a href="https://lib.bwgl.cn/opac/BWXY/">图书检索</a></li> <li><a href="https://oa.bwgl.cn/seeyon/index.jsp">办公自动化系统(OA)</a></li> <li><a href="http://qzjw.bwgl.cn/gllgdxbwglxy_jsxsd/">教务系统</a></li> <li><a href="https://yxxt.bwgl.cn/yxxt/zzyx/xsLogin_index.do">迎新系统</a></li> <li><a href="https://eepay.bwgl.cn/wac/pc/login/login.html#/">缴费系统</a></li> <li><a href="https://xgxt.bwgl.cn/xgxt/">学工系统</a></li> <li> <a href="">校园邮箱</a> <ol> <li><a href="https://mail.nnct.edu.cn">教师端</a></li> <li><a href="mail.stu.nnct.edu.cn">学生端</a></li> </ol> </li> <li><a href="w.bwgl.cn">上网认证</a></li> <li><a href="http://wcdzts.zhuoxunxinkeji.com/Inuseraction.action?actionkind=userLogin">五车图书</a></li> <li><a href="jgdzts.zhuoxunxinkeji.com/Login/Login.aspx">京广图书</a></li> <li><a href="https://zc.bwgl.cn/Login_new.aspx?ReturnUrl=%2f">资产系统</a></li> <li><a href="https://web.bwgl.cn/site/xiao-nei-wang/">校内网</a></li> </ol> </li> </ul> </div> </body> </html>2、结果展示：
3.二级下拉菜单展示
