Is there a way to make a sub-menu appear outside of the elements div that I'm hovering over? I've tried various methods, but none have been successful so far. The design requires the submenu to be outside of the links div.
What is the most effective approach to achieve this?
.header {
display: flex;
padding: 20px 0;
}
.nav {
max-width: 1100px;
width: 100%;
margin: auto;
}
.nav a {
margin: 0 35px 0 0;
color: #333333;
transition: 0.5s ease;
}
#sub-menu {
position: relative;
width: 100%;
background: #333;
height: 150px;
display: none;
margin-top: 20px;
max-width: 100%;
}
.three:hover #sub-menu {
display: block
}<div class="header">
<div class="nav">
<a class="one" href="#">Home</a>
<a class="two" href="#">About</a>
<a class="three" href="#">Services</a>
<a class="four" href="#">Contact</a>
</div>
<div id="sub-menu"></div>