CSS Dropdown menu and padding (gap) problem-CodePudding

thank you in advance for answering this thread.

We have created a dropdown menu for our web-page but we are having a small issue with regards to the padding.

Please find the code below. Also find attached the reset we have used (reset.css) in case there is something related.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dexeus Rep</title>
    <link rel="stylesheet" href="./resources/styles/reset.css">
</head>
<body>
    <nav >
        <div >
            <ul>
                <li><a href="#">LINK 1</a>
                    <ul >
                        <li><a href="#">Link 1.1</a></li>
                        <li><a href="#">Link 1.2</a></li>
                        <li><a href="#">Link 1.3</a></li>
                        <li><a href="#">Link 1.4</a></li>
                        <li><a href="#">Link 1.5</a></li>
                        <li><a href="#">Link 1.6</a></li>
                        <li><a href="#">Link 1.7</a></li>   
                    </ul>
                </li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
            </ul>
        </div>
    </nav>
</body>

<style>

.nav-bar {
    background-color: black;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 3.325em;
}

.nav-items {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-items ul {
    display: flex;
    color: orange;
}

.nav-items ul li {
    color: white;
    display: flex;
    align-items: center;
    font-size: 1em;
    font-weight: 600;
    padding-left: 1em;
    padding-right: 1em;
    height: 3.325em;
    background-color: black;
}

ul li:hover {
    background-color: orange;
}

ul li ul {
    visibility: hidden;
    display: none;
    position: absolute;
    margin-top: 1px;
    top: 3.325em; /* same as nav-bar height */
    /* height: 18em; */
}

.dropdown li{
    position: relative;
}

ul li:hover > ul, ul li ul:hover {
    visibility: visible;
    display: flex;
    flex-direction: column;
    height: 18.5em;
}
</style>

RESET:

@charset "UTF-8";
/*

  Con este reset vamos a resolver: