CSS下拉相同宽度

Question

function myFunction() {
    var x = document.getElementById("primaryNavigation");
    if (x.className === "show") {
        x.className = "hide";
    } else {
        x.className = "show";
    }
}

/* NAVIGATION - MENU */

nav {
    background-color: #0000ff;
}

nav button {
    display: block;
    position: absolute;
    top: .5rem;
    right: 2%;
}

nav ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

nav ul.show {
    display: flex;
}

nav ul.hide {
    display: none;
}

nav ul li {
    width: 100%;
    list-style: none;
}

nav ul li a {
    display: block;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 450;
    padding: 1rem 0;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

nav ul li.active a {
    background-color: #f52c39;
}

nav ul li a:hover {
    background-color: #4c9bff;
}

.clearfix:after,
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* DROP DOWN MENU */

ul ul {
    position: absolute;
    display: none;
    background-color: #0000ff;
}

li:hover ul {
    display: block;
    background-color: #0000ff;
}

nav ul ul li a:hover {
    background-color: #4c9bff;
}

<nav class="clearfix">
    <button onclick="myFunction()">&#9776;</button>
    <ul class="hide" id="primaryNavigation">
        <li class="active"><a href="home.php">Home</a></li>
        <li><a href="adventures.php">Adventures</a>
            <ul>
                <li><a href="whiteWater.php">White Water Rafting</a></li>
                <li><a href="hikingZipline.php">Hiking &amp; Zipline</a></li>
                <li><a href="camping.php">Camping</a></li>
            </ul>
        </li>
        <li><a href="guides.php">Guides</a></li>
        <li><a href="booking.php">Booking</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

 

我希望我的下拉菜单与父级的宽度相同。 （仅供参考：它具有响应性并变成汉堡包）。我意识到这对某人来说可能很容易（但我只是在学习）。我已经尝试了我在这里列出的所有解决方案和其他地方无济于事。谢谢你的帮助。