Javascript 相对于图标位置定位div

当用户将鼠标悬停在我的网站名称旁边的V形图标上时，会出现一个带有选项的div。

问题：名称可以有不同的长度，我希望在V形下面显示div，无论名称有多长。

这是我的代码：

HTML

<div class='settings'><i class='icon ion-chevron-down'></i></div>
<div class='settings-wrapper'>
    <ul class='settings-bubble'>
        <li>Bearbeiten</li> 
        <li>Löschen</li>
    </ul>
</div> 

我将非常感谢任何形式的帮助

如果我将

left:0

更改为

right:0

，看起来是这样的：

---

在

中。设置气泡

更改

左侧：0进入<代码>右侧：0，它将粘贴到父对象的右内侧，而不是左内侧

编辑：技巧是将包含气泡的div添加到包含任意长度字符串的div中，并将该div中的气泡附加到右内侧，如所示。
当图标悬停时，有一个显示该div的事件处理程序。在该处理程序中，您可以检查图标的x和y坐标。显示div时，可以修改其样式以相对于图标定位。例如：


var chevron=document.getElementById（'chevron'）；
var popup=document.getElementById（'popup'）；
chevron.addEventListener（'mouseover'，函数（e）{
popup.classList.remove（'hidden'）；
popup.style.left=e.target.offsetLeft+'px'；
});
chevron.addEventListener（'mouseout'，函数（e）{
popup.classList.add（'hidden'）；
});
。隐藏{
显示：无；
}
#弹出窗口{
位置：绝对位置；
边框：1px实心#000；
}
一些长标题>
弹出
Woops，将此添加为答案。如果我正确理解了问题，您可以使用包装器（如您所用）并使用
right:0而不是左键。它应该与包装的右侧对齐。谢谢！但这太对了！我无法将名称的宽度设置为固定宽度，因为它的长度可以在2到64个字符之间。这是因为您的整个内容没有包装，只有您的
气泡
被包装。如果您在包装器中包含
设置
div，它应该可以正常工作。或者是那种性质的。甚至可能需要另一个包装来包含所有内容。如果可能，创建一个问题演示..我添加了一个提琴！谢谢你迄今为止所做的一切努力！！那真是太好了！！有没有一种方法可以使用类而不是id？因为我在foreach循环中使用我的代码。对不起，我对这一切都不熟悉。var chevron=document.getElementByClass（'chevron'）；？您可以使用document.querySelector（'.chevron'）将元素按其类作为目标，假定它是文档中具有该类名的第一个元素。
// The chevron icon 
.settings {
    display: inline;
    position: relative;
    padding: .1em 0 0 .5em;
    opacity: 0; // I display the chevron on hover using jquery
}

// The options bubble
.settings-wrapper { 
    position: relative; 
}

.settings-bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 .6em;
    opacity: 0;
    z-index: 9999;
    li {
        position: relative;
        display: block;
        a { float: left; }
    }
}