Why is there no menu pop-up when the mouse is over the text?

cat  m2.js

function popMenu(event){
    var mymenu = document.getElementById("menu-div");
    mymenu.style.left = event.clientX + "px";
    mymenu.style.top = event.clientY + "px";
    mymenu.style.display = "block";
    return false;
}

cat m2.css
-sharpmenu-div{
    width:140px;
    height:200px;
    background-color:-sharp00beff;
    position:fixed;
    display:none;
    border:2px solid  red;
}

li{
    margin-left:-10px;
    line-height:35px;
}

html Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="m2.css">
    <script src="m2.js"></script>
</head>
<body>
    <p onmouseover="popMenu();">

<div id="menu-div"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>

Why is there no menu pop-up when the mouse is over the word Hello?
how do I modify it?

Mar.10,2021

popMenu () if you adjust it in this way, there are no parameters.
it is best to select the element and add the event


popMenu () does not pass parameters. The, popMenu () method does not have event parameters. Just use this directly inside


 function popMenu() {
        var mymenu = document.getElementById('menu-div');
        mymenu.style.left = this.clientX + "px";
        mymenu.style.top = this.clientY + "px";
        mymenu.style.display = 'block';
        return false;
    }

change the js code to the above. This is the element that currently triggers the event. There is no need to use the event object, event represents the event, not the element that triggered the event, and this or event.currentTarget represents the element that triggers the event. And there is no way to use event objects by adding events directly to tags in html.

Menu