Is it possible to make a dropdown menu within a navigation bar open to the full width of the page, even when the parent container has a maximum width of 500px?
My attempt to use 100vw resulted in misaligned dropdown elements, and I cannot move the navbar outside of the max-width container. Any suggestions?
Here is the code for reference: https://codepen.io/chiragjain94/pen/Vwwbwop?editors=1100
<div class="max">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
</ul>
</li>
<li><a href="#">User Experience</a></li>
</ul>
</nav>
CSS:
.max{
max-width:500px;
margin: 0 auto;
}
nav {
text-align:center;
width: 100%;
background: #bebebe;
padding: 0;
margin: 0;
height: 60px;
position:relative;
}
nav ul {
background: #bebebe;
list-style:none;
padding:0 20px;
margin: 0;
height: 60px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color:#333333;
display:block;
padding:0 40px;
text-decoration:none;
float: left;
height: 60px;
line-height: 60px;
}
nav ul li:hover {
background: #333333;
}
nav ul li:hover > a{
color:#FFFFFF;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul {
background: red;
padding:0;
text-align: center;
display:none;
width: 100vw;
position: absolute;
top: 60px;
left:-0px;
right:0px;
}
How can I make the dropdown menu align to the left edge of the entire page while maintaining a max-width container?