HTML文件在已有导航栏的基础上如何实现下拉式二级隐藏菜单

img


怎么做的鼠标放置在全部商品处，弹出饮品、小吃、中餐、西餐、早饭等二级下拉式隐藏菜单，无需跳转页面，仅显示二级菜单即可
以下是HTML头部文件




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/css.css" />
<title>校园外卖</title>
</head>

<body>
<div class="wrapin"> 
  <!--顶部-->
  <header class="clearfix"> <a href=" " class="logo">校园外卖</a >
    <ul class="nav">
      <li><a href="first.html">首页</a ></li>
      <li><a href="all.html">全部商品</a ></li>
      <li><a href="money.html">账户充值</a ></li>
      <li><a href="denlu.html">登录注册</a ></li>
      <li><a href="help.html">帮助</a ></li>
    </ul>
  </header>
      </body>
</html>

以下为css样式

/*通用类*/
* {
    margin: 0;
    padding: 0;
}
body {
    min-width: 1000px;
    margin: 0 auto;
    font-size: 14px;
    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif;
    background: #fff;
    text-align: justify;
    color: #010000;
    position: relative;
}
h1, h2, h3 {
    font-weight: 500;
}
img {
    border: none;
}
a {
    cursor: pointer;
    color: #333;
    text-decoration: none;
    outline: none;
}
ul {
    list-style-type: none;
}
em {
    font-style: normal;
}
.lt {
    float: left;
}
.rt {
    float: right;
}
div.clear {
    font: 0px Arial;
    line-height: 0;
    height: 0;
    overflow: hidden;
    clear: both;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
/*导航栏的容器(wrapin 主体容器宽度)*/
.wrapin {
    width: 1000px;
    height:50px;
    margin-left: auto;
    margin-right: auto;
    background: #CF2212;
}
/*<!-- 外部样式表reset.css -->
<link rel="stylesheet" href="reset.css">
<!-- 外部样式表二级菜单 -->
<link rel="stylesheet" href="style.css">*/
/*公用CSS 开始*/

/*header 开始*/
/*.warpin .nav .nav-container{
    float: left;
    background: c#CF2212;
    text-align: center;
    width: 155px;
    border-right: solid 2px #FFFFFF;
}
.warpin .nav .nav-container .nav-list{
    display: none;
}
.warpin .nav .nav-container:hover .nav-list{
    display: list-item;
}
.warpin li:hover{
    background: #FFFFFF;
}*/
/*a{
    line-height: 50px;
    color: #FFFFFF;
}*/
header {
    background:#cf2212;
    line-height: 60px;
    padding: 0 15px;
}
header .logo {
    float: left;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    line-height: 60px;
}
header .nav {
    float: right;
}
header .nav li {
    width: 120px;/*红色导航栏的宽*/
    text-align: center;
    font-size: 16px;/*字体大小*/
    display: inline-block;
}
header .nav li a {
    color: #fff;/*导航栏字体颜色*/
}
.banner {
    display: block;
}
.banner img {
    display: block;
    width: 100%;
}
.in_com {
    background: #f4f8ff;
    padding: 15px;
    display: block;
}
.con_top .pic {
    width: 300px;
    float: left;
}
.con_top .pic img {
    width: 100%;
}
.con_top .text {
    float: right;
    width: 650px;
    line-height: 28px;
    color: #333;
}
.title {
    background: #598bd2;
    line-height: 40px;
    padding: 0 15px;
    margin: 20px 0;
}
.title h2 {
    font-size: 20px;
    color: #fff;
}
.text_a {
    line-height: 28px;
    color: #333;
}
.text_a img {
    margin-left: 15px;
}
footer {
    background: #cf2212;
    line-height: 60px;
    padding: 0 15px;
    text-align: center;
    font-size: 14px;
    color: #fff;
}
.pic_con {
    margin: 0 -15px;
}
.pic_con li {
    float: left;
    width: 33.333%;
    box-sizing: border-box;
    padding: 15px;
}
.pic_con li img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}
.renwu_box li {
    position: relative;
    height: 260px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 15px;
}
.renwu_box li .pic {
    width: 260px;
    height: 260px;
    position: absolute;
    left: 0;
    top: 0;
}
.renwu_box li .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.renwu_box li .text {
    margin-left: 280px;
    font-size: 16px;
    line-height: 28px;
    color: #333;
}

你非要截图?不能把代码粘贴出来?

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^