导航内的下拉菜单定位

时间:2018-10-10 13:51:20

标签: html css html5 css3 flexbox

我要在网站标题的“项目”链接上创建下拉菜单时遇到问题。

我希望“项目”链接保持不变,并在其下方打开下拉菜单并居中。我试图通过使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>

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

2 个答案:

答案 0 :(得分:1)

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

should do it

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

答案 1 :(得分:1)

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