CSS Dropdown Same Width - 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()">☰</button>
<ul class="hide" id="primaryNavigation">
<li class="active">Home</li>
<li>Adventures
<ul>
<li>White Water Rafting</li>
<li>Hiking & Zipline</li>
<li>Camping</li>
</ul>
</li>
<li>Guides</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</nav>
I want my dropdown menu to be the same width as the parent. (FYI: It is responsive and changes into a hamburger). I realize this is probably so easy for someone (but I'm just learning). I've tried all the solutions I've seen listed here and other place to no avail. THANK YOU for any help.