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>