<style>
    .header{
        font-weight: bold;
        width: 100%;
        height: 20px;
        box-sizing: border-box;
    }

    body{
        list-style: none;
    }

    .header ul {
        float: right;
        height: 100%;
        width: 40%;
        font-size: 20px;
    }
    .header li ul .nav_detail a:hover {
        background: black;
        color: white;
    }
    body, h1, h2, h3, ul, ol, li {
        padding: 0;
        margin: 0;
    }
    .header li ul .nav_detail a {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-align: center;
        text-decoration: none;
    }
    .header li ul .nav_detail {
        position: relative;
        text-align: left;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background: black;
        line-height: 40px;
        list-style: none;
        width: 100%;
        height: 40px;
        cursor: pointer;
        z-index: 9999;
    }
    ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        //padding-inline-start: 40px;
    }
    .header>ul>li:hover {
        color: gray;
    }
    .header li:hover {
        background-color: inherit;
    }
    .header li {
        position: relative;
        text-align: center;
        list-style: none;
        float: left;
        line-height: 20px;
        width: 10%;
        color: #444444;
        cursor: pointer;
    }

/*
.header li:hover > ul {
    display: block;
}
.header li ul {
    display: none;
    position: relative;
    z-index: 9999;
    width: 100%;
    z-index: 9999;
}
*/
    .header .sub-menu {
        display: none;
        position: relative;
        z-index: 9999;
        width: 100%;
        z-index: 9999;
    }
    .header .sub-menu{
        display: none;

    }
    .header .sub-menu.show{
        display:block; 
    }
</style>
<div class="header">
    <ul>
        <li>A-1
            <ul class="sub-menu">
                <li class="nav_detail"><a href="#">A</a></li>
                <li class="nav_detail"><a href="#">B</a></li>
                <li class="nav_detail"><a href="#">C</a></li>
                <li class="nav_detail"><a href="#">D</a></li>
                <li class="nav_detail"><a href="#">E</a></li>
            </ul>
        </li>
        <li>A-2
            <ul class="sub-menu">
                <li class="nav_detail"><a href="#">F</a></li>
                <li class="nav_detail"><a href="#">G</a></li>
                <li class="nav_detail"><a href="#">H</a></li>
                <li class="nav_detail"><a href="#">I</a></li>
                <li class="nav_detail"><a href="#">J</a></li>
            </ul>
        </li>
    </ul>
</div>
<script>
    $(document).ready(function () {
        $(".header>ul>li").hover(function () {
            $(".header .sub-menu").addClass('show')
        },function () {
            $(".header .sub-menu").removeClass('show')
        })
    })
</script>

붉은색볼드 표시한부분이 주석처리되거나 추가로넣은부분입니다.