HTML下拉菜单不能正确定位

Question

我已经制作了一个下拉菜单，可用于我的网站中的三个不同链接。下拉本身工作正常，但我遇到的问题是我无法让下拉菜单将自己放置在每个导航链接的中间位置，但正确定位其中一个链接，但是其他链接不正确，因为它们是不同的字符长度。下拉完全是在HTML和CSS中完成的，网站的其他部分也使用Django，但它并未在下拉菜单中使用。问题

图片 -

（这是下拉位置不正确的一个链接，你可以看到在对话框顶部的三角形不与中间环节一字排开。）

（在这其中你可以看到三角形或多或少与链接中心，但是我相信这只是偶然）

下拉HTML（对于下拉菜单之一但它是相同的其他人）

 <li class="link-drop"><a href="">Employer</a> 
      <ul class="link-drop-ul"> 
       <div class="triangle"></div> 
       <div class="link-drop-box"> 
        <li><a class="link-drop-a" href="{% url 'createjoblisting' %}">Add Listing</a></li> 
        <li><a class="link-drop-a" href="{% url 'featurenotimplemented' %}">How it works</a></li> 
       </div> 
      </ul> 
     </li> 

下拉CSS（这是相同的所有）

.link-drop { 
    list-style-type: none; 
    display: inline; 
    font-size: 16px; 
    cursor: pointer; 
    list-style-type: none; 
    display: inline-block; 
    float: right; 
    margin: auto; 
    text-align: center; 
} 
.link-drop li { 
    list-style-type: none; 
} 
.link-drop a { 
    text-decoration: none; 
    color: #ebebee; 
    float: right; 
    margin-top: 18px; 
    margin-right: 9px; 
    margin-left: 9px; 
    list-style-type: none; 
} 
.link-drop-ul { 
    display: none; 
    position: absolute; 
    text-align: center; 
    padding-top: 18px; 
    -webkit-transition: all .1s ease-out; 
    -moz-transition: all .1s ease-out; 
    -ms-transition: all .1s ease-out; 
    -o-transition: all .1s ease-out; 
    transition: all .1s ease-out; 
} 
.link-drop-box { 
    padding-bottom: 1px; 
    padding-top: 1px; 
    background-color: white; 
    box-shadow: 0px 0px 38px -10px black; 
    border-radius: 5px; 
    width: 122px; 
    margin: auto; 
} 
.triangle { 
    width: 0; 
    height: 0; 
    position: relative; 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    border-bottom: 8px solid white; 
    left: 50%; 
    margin-left: -8px; 
} 
.link-drop-ul li { 
    margin-top: 15px; 
    margin-bottom: 15px; 
} 
.link-drop-ul li a { 
    color: black; 
    float: none; 
} 
.link-drop-ul li a:hover { 
    color: #d1d1d1; 
} 
.link-drop:hover > .link-drop-ul { 
    display: block; 
    position: absolute; 
    padding-top: 55px; 
    padding-left: 0px; 
    margin-top: 10px; 
} 

任何帮助表示赞赏，谢谢！

Answer 1

以下是您遇到的问题的解决方案。我已经改变/移动/添加了一些CSS。

.link-drop { 
 
    position:relative; 
 
    list-style-type: none; 
 
    display: inline; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    float: right; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
.link-drop li { 
 
    list-style-type: none; 
 

 
} 
 
.link-drop a { 
 
    text-decoration: none; 
 
    color: #ebebee; 
 
    float: right; 
 
    margin-top: 18px; 
 
    margin-right: 9px; 
 
    margin-left: 9px; 
 
    list-style-type: none; 
 
} 
 
.link-drop-ul { 
 
    display: none; 
 
    position: absolute; 
 
    width: 122px; 
 
    text-align: center; 
 
    -webkit-transition: all .1s ease-out; 
 
    -moz-transition: all .1s ease-out; 
 
    -ms-transition: all .1s ease-out; 
 
    -o-transition: all .1s ease-out; 
 
    transition: all .1s ease-out; 
 
    padding: 0; 
 
    margin:0; 
 
    left: 50%; 
 
    -moz-transform: translatex(-50%); 
 
    -ms-transform: translatex(-50%); 
 
    -o-transform: translatex(-50%); 
 
    -webkit-transform: translatex(-50%); 
 
    transform: translatex(-50%); 
 
    top:100%; 
 
    padding-top:20px; 
 
} 
 
.link-drop-box { 
 
    padding-bottom: 1px; 
 
    padding-top: 1px; 
 
    background-color: white; 
 
    box-shadow: 0px 0px 38px -10px black; 
 
    border-radius: 5px; 
 
    margin: auto; 
 
} 
 
.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    position: relative; 
 
    border-left: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    border-bottom: 8px solid white; 
 
    left: 50%; 
 
    margin-left: -8px; 
 
} 
 
.link-drop-ul li { 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
} 
 
.link-drop-ul li a { 
 
    color: black; 
 
    float: none; 
 
} 
 
.link-drop-ul li a:hover { 
 
    color: #d1d1d1; 
 
} 
 
.link-drop:hover > .link-drop-ul { 
 
    display: block; 
 
    position: absolute; 
 

 
}

<li class="link-drop"><a href="">Employer</a> 
 
      <ul class="link-drop-ul"> 
 
       <div class="triangle"></div> 
 
       <div class="link-drop-box"> 
 
        <li><a class="link-drop-a" href="{% url 'createjoblisting' %}">Add Listing</a></li> 
 
        <li><a class="link-drop-a" href="{% url 'featurenotimplemented' %}">How it works</a></li> 
 
       </div> 
 
      </ul> 
 
     </li>