Having trouble making my list items (li) from the unordered list (ul) stretch across the page like the navigation bars on websites such as Verragio and James Allen. Can someone assist me with this? Here is a basic example of a 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;
}
.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"><a href="#">Test1</a></li>
<li class="navbar-tab-1 select">
<a href="#">Test2</a>
<ul class="hover-list select">
<li><a href="#">Item1</a></li>
</ul>
</li>
</ul>
</nav>