how to make li of ul width stretch the whole screen - html

Question

I was wondering but I have been spending a lot of time trying to find a way to make my li from my ul stretch across but I seem not to be able to do it. It's very similar to the nav bar of This website and This website.I am asking if someone can help me with this.
Thank you. Best I can provide is a basic nav hover bar
.dropdown-btn {
width: 100%;
height: 50px;
background: white;
line-height: 50px;
display: none;
}
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
margin-bottom: 1px;
position: sticky;
top: 0;
padding: 0px 0px;
border: none;
}
ul {
text-indent: 0px;
}
nav:hover {
height: 50px;
}
.navbar-tab {
display: block;
}
.hover-list {
position: absolute;
}
.navbar-tab-1 {
background: #d60d8c;
float: left;
border: none;
}
.navbar-tab-1+.navbar-tab-1 {
border-bottom: none;
}
.hover-list {
border-top: black 3px solid;
}
.navbar-tab {
padding-left: 20px;
display: block;
}
.navbar-tab {
max-width: 1240px;
}
.navbar-tab-1 {
padding-right: 68px;
width: auto;
}
.hover-list li {
background-color: #e2e2e2;
border-bottom: 1px white solid;
font-size: 15px;
text-indent: 20px;
height: 35px;
line-height: 35px;
width: 100vw;
border-top: none;
float: left;
}
ul li ul li {
display: block;
}
ul li {
font-size: 19px;
}
ul {
padding: 0px;
list-style: none;
font-family: arial;
margin: auto;
}
.navbar-tab-1:hover {
color: black;
transition-duration: .2s;
}
ul li {
font-family: 'Raleway', sans-serif;
font-weight: 400;
line-height: 50px;
list-style: none;
}
ul li a {
text-decoration: none;
color: black;
}
ul li ul li{
display: none;
transition-duration:
}
.hover-list li:hover{
background-color: #f5f5f0;
transition-duration: .2s;
}
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Test1</li>
<li class="navbar-tab-1 select">
Test2
<ul class="hover-list select">
<li>Item1</li>
</ul>
</li>
</ul>
</nav>

Answer 1

Maybe something you are looking for
body {
margin:0;
}
.dropdown-btn {
width: 100%;
height: 50px;
background: white;
line-height: 50px;
display: none;
}
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
margin-bottom: 1px;
position: sticky;
top: 0;
padding: 0px 0px;
border: none;
}
ul {
padding-left: 0;
position: relative;
list-style: none;
margin-bottom: 0;
}
nav:hover {
height: 50px;
}
.navbar-tab {
display: block;
}
.hover-list {
position: fixed;
max-height: 0;
transition: max-height 1s;
padding: 0;
width: 100vw;
overflow: hidden;
left: 0;
top: 66px;
}
.hover-list > li {
width: 100%;
}
.navbar-tab-1 {
background: #d60d8c;
float: left;
border: none;
}
.navbar-tab-1+.navbar-tab-1 {
border-bottom: none;
}
.navbar-tab {
padding-left: 20px;
display: block;
}
.navbar-tab {
max-width: 1240px;
}
.navbar-tab-1 {
padding-right: 68px;
width: auto;
}
.hover-list li {
background-color: #e2e2e2;
border-bottom: 1px white solid;
font-size: 15px;
text-indent: 20px;
height: 35px;
line-height: 35px;
border-top: none;
float: left;
}
ul li ul li {
display: block;
}
ul li {
font-size: 19px;
}
ul > li:hover ul {
max-height: 500px;
}
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Test1</li>
<li class="navbar-tab-1 select">Test2
<ul class="hover-list select">
<li><a>Item1</a></li>
</ul>
</li>
</ul>
</nav>