如何使下拉菜单显示在每个悬停按钮上？

Question

im试图使下拉内容框相对于每个悬停框都出现，但它们似乎都出现在左上角。我该怎么办？

我对html很陌生，因此在回答时请考虑这一点。

<title>Training Module</title>

<style>
    body {

        background-image: url(1.jpg);
        background-repeat: no-repeat;
        background-size: contain;
    }



    div {
        border: solid 1px rgb(31, 138, 187);
    }

    div:hover {
        cursor: pointer;
    }

    .dropbtn {

        color: rgb(31, 138, 187);
        padding: 16px;
        font-size: 16px;

    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content p {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content {
        display: none;
        position: relative;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }


    .dropdown-content a:hover {
        background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

</style>

                                           

提交ID的说明

                                                                      

文件编号说明

                                                          

类别类型的说明

             

我需要下拉列表以相对于悬停框的位置出现