导航中的下拉菜单定位

Question

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

我希望"项目"链接保持不变，并在其下方打开下拉菜单并居中。我通过尝试使下拉列表Contentdiv绝对定位来部分实现这一点，但是菜单不在"项目"链接下居中。

我第一次尝试使用弹性框，因为它对于定位目的更加直观，但这可能是此错误的根源。

有问题的 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>

Codepen在这里：https://codepen.io/anon/pen/oaZLYe

Answer 1

#dropdown {
position: relative;
}
#dropdownContent {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}

应该这样做。

注意：触摸设备没有:hover，因此您可能还希望使用:hover向所有当前选择器添加:active。
而且您不应该指望在"项目"上有一个活动链接。在现代UI中解决此问题的方法是将链接拆分为两个：实际的链接部分和下拉打开器(或插入符号(。但是插入符号应该足够大以容纳手指，而不会有接触"链接"部分的风险(标准尺寸45px ✕ 45px但大多数用户可以安全地使用35px ✕ 35px插入符号(。

Answer 2

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