Html 导航中的下拉菜单定位

我在网站标题中的“项目”链接上尝试设置的下拉菜单的位置有问题

我希望“项目”链接保持不变，下拉菜单在其下方打开并居中。我试图使dropdownContent div绝对定位，从而部分实现了这一点，但是菜单并没有在“Projects”链接下居中

我第一次尝试使用flex box，因为它在定位方面更加直观，但这可能是这个错误的根源

所讨论的HTML/CSS：

#dropdownContent{
  display:none;
}

#dropdownContent a{
  color: #96C0CE;
  border-right: 1px white solid;
  padding-right: 5px;
  margin-top: 5px;
  margin-right: 5px;
}

#dropdownContent #tutoring{
  border: none;
}

#dropdownContent a:hover{
  color: #525564; 
}

#dropdown:hover #dropdownContent{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

<li class="navlink">
<div id="dropdown">
            <a id="menuTab" href="#">
             Projects
             <i class="fa fa-caret-down"></i>
              </a>
                          <div id="dropdownContent">
                            <a href="#">Engineering</a>
                            <a href="#">Development</a>
                            <a id="tutoring" href="#">Tutoring</a>
                          </div>
             </div>
</li>

#下拉内容{
显示：无；
}
#下拉内容a{
颜色：#96C0CE；
右边框：1px白色实心；
右侧填充：5px；
边缘顶部：5px；
右边距：5px；
}
#下拉内容#辅导{
边界：无；
}
#下拉内容a：悬停{
颜色：#525564
}
#下拉：悬停#下拉内容{
显示器：flex；
弯曲方向：行；
调整内容：灵活启动；
对齐项目：居中；
}

            
                          
                            
                            
                            
                          
             

代码笔在这里：

#下拉列表{
位置：相对位置；
}
#下拉内容{
位置：绝对位置；
最高：100%；
左：50%；
转化：translateX（-50%）；
}

注意：触摸设备没有

：hover

，因此您可能还需要使用

：hover

向所有当前选择器添加

：active

---

你不应该指望在“项目”上有一个活跃的链接。在现代UI中解决这个问题的方法是将链接拆分为两部分：实际的链接部分和下拉菜单（或插入符号）。但是插入符号应该足够大，可以容纳一个手指，而不会有接触“链接”部分的风险（标准尺寸为

45px）✕ 45px

但大多数用户可以安全地使用

35px✕ 35px

caret）。

谢谢Andrei！现在我还没有考虑移动设备，因为我还在学习基础知识。当我到达那里时，我会记住这一点！

#dropdown {
  position: relative;
}
#dropdownContent {
  position: absolute;
  top: 100%;
  left: 0;
}