Html 如何在我的topnav中加入下拉链接

我正在做一个大学作业，在那里我必须制作一个网站。我使用FlexBox构建了一个顶部菜单，但是我很难在其中包含一个下拉导航列表。我知道有成千上万的toturials教你如何制作这些菜单，但是这些toturials中的大多数只创建非常简单的菜单，没有flex box和一些糟糕的格式。。。我想，当用户悬停在“我们是谁”三个链接出现在“我们是谁”下

现在，我将提供我的html和css，以及对问题的进一步描述：

 <header>
    <nav>
        <ul class="nav_links">
            <li><img src="Logo.webp" alt="Logo" height="100px" width="100px"></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Who Are We</a></li>
            <li><a href="#">What Do We Do</a></li>
            <li><a href="#">Indicators</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">More</a></li>
        </ul>
    </nav>
</header>

我知道诀窍是把ul放在我想下拉的li下面，隐藏它，只有当用户悬停在它上面时才显示它，但我无法让它工作。下拉式导航链接总是很奇怪和不合适。我被困在这里有好几次了，所以如果有人能帮我的话，我整个月都会受困于此！ 谢谢 （对不起，如果我的英语很奇怪，那不是我的第一语言）。也忽略我的html上的徽标，它只是一个小图像

大概是这样的：

---

我编辑了你的代码，但是如果你想要一个功能齐全的下拉菜单，你需要一点javascript

*{
框大小：边框框；
保证金：0；
填充：0；
}
/*顶部菜单*/
.导航链接{
z指数：9；
背景色：白色；
位置：固定；
宽度：100%；
高度：100px；
列表样式类型：无；
显示器：flex；
证明内容：柔性端；
}
.nav_links li{
利润率：40像素25像素；
字体系列：“开放式Sans”、Arial、Sans serif；
字体大小：13px；
文本转换：大写；
}
.导航链接a{
文字装饰：无；
垫底：10px；
}
.导航链接李a：悬停{
边框底部样式：实心；
边框颜色：米色；
}
李娜：参观了{
颜色：黑色；
}
李海军：第一个孩子{
右边距：自动；
位置：相对位置；
底部：40px；
}
#我们是谁：悬停+下拉菜单{
显示：块；
}
#下拉菜单a{
显示：块
}
#下拉菜单{
显示：无；
位置：绝对位置；
}

我正在重新编写一个css，使其像这样，悬停后将其下拉。

.dropdown菜单ul、.dropdown菜单li{
保证金：0；
填充：0；
}
.下拉菜单{
背景：灰色；
列表样式：无；
宽度：100%；
}
.下拉菜单李{
浮动：左；
位置：相对位置；
宽度：自动；
}
.下拉菜单a{
背景：#30A6E6；
颜色：#FFFFFF；
显示：块；
字体：粗体12px/20px无衬线；
填充：10px 25px；
文本对齐：居中；
文字装饰：无；
-webkit过渡：全部.25秒轻松；
-moz过渡：全部.25秒轻松；
-ms过渡：全部.25秒轻松；
-o型过渡：全部0.25秒缓解；
过渡：全部.25秒缓解；
}
.dropdownmenu li:将鼠标悬停在a上{
背景：#000000；
}
#子菜单{
左：0；
不透明度：0；
位置：绝对位置；
顶部：35px；
可见性：隐藏；
z指数：1；
}
li：悬停ul#子菜单{
不透明度：1；
顶部：40px；/*根据顶部导航垫顶部和底部调整*/
能见度：可见；
}
#子菜单li{
浮动：无；
宽度：100%；
}
#子菜单a：悬停{
背景：#DF4B05；
}
#子菜单a{
背景色：#000000；
}

试试看这个例子：非常感谢，您的解决方案正是我想要的！您的代码运行良好，我只添加了以下内容：#drop_menu:hover{display:block；}，这样当用户停止悬停“WHO ARE WE”链接时，子菜单仍会显示，并根据我的喜好为子菜单添加了一些填充。继续努力吧，伙计！谢谢你的回答，不过我想保留我原来的菜单，而不是新的。不过我很欣赏，我觉得你们的转变很酷，我想我会在我的工作中实现它们！谢谢

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* top menu */
.nav_links{
  z-index: 9;
  background-color: white;
  position: fixed;
  width: 100%;
  height: 100px;
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
}
.nav_links li{
  margin: 40px 25px;
  font-family: 'Open Sans',Arial,sans-serif;
  font-size: 13px;
  text-transform: uppercase;
}

.nav_links a{
  text-decoration: none;
  padding-bottom: 10px;
}


.nav_links li a:hover{
  border-bottom-style: solid;
  border-color: beige;
}

.nav_links li a:visited{
  color: black;
}


nav ul li:first-child {
  margin-right: auto;
  position: relative;
  bottom: 40px;
}