Javascript 从当前鼠标位置绘制三角形

我目前有一个类别下拉菜单，当用户将鼠标悬停在主类别上时，它会加载子类别

<div class="all-categories">
  <li><a href="#">Category 1</a></li>
  <li><a href="#">Category 2</a></li>
  <li><a href="#">Category 3</a></li>
  // More categories here
</div>

现在，如何从光标位置到

的右上角和右下角创建一个三角形

非常感谢您的帮助。：）
 您需要创建具有
位置：绝对值的三角形元素，如下所示


#三角形{
边框颜色：黄蓝红绿；
边框样式：实心；
边框宽度：100px 100px 100px 100px；
宽度：0；
身高：0；
}
我无法理解您为什么要在这里绘制三角形，如果您想防止用户试图进入子菜单时不必要的菜单更改，那么我想您肯定应该换一种方式。例如，在显示子菜单时，尝试设置一个大约200或300毫秒的时间延迟。如果光标比这个时间早出来，则只需取消它即可。@YavuzTas感谢您的评论，我已经尝试过了，但用户体验受到了影响，因为他必须等待一段时间才能显示子菜单，这也会导致导航感觉不流畅。如果你对自己编写它没有强烈的热情：）那么我发现了一个实现，它看起来很好，与你想要的类似，以防你想检查：没关系，但是如果它是用来作为一个安全点，在mousemove声音中更新它。。。奇怪的它应该基于活动菜单切换元素生成，否则，它不会保存任何不好的内容。
function handleMouseMove(event) {
    var eventDoc, doc, body;

    event = event || window.event; // IE-ism

    // If pageX/Y aren't available and clientX/Y are,
    // calculate pageX/Y - logic taken from jQuery.
    // (This is to support old IE)
    if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;

        event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
    }

    // Use event.pageX / event.pageY here
    console.log(event.pageX + ", " + event.pageY);
}

jQuery(document).ready(function () {
  document.querySelector(".all-categories").onmousemove = handleMouseMove;

});