I am facing an issue with my sample menu layout. It appears fine on desktop view, but when I switch to a smaller window size of 480px, the items from About to Contact disappear when I hover away from the last item in the .has-children class. It seems like the menu is not expanding enough to display all the items.
I have provided a snippet and would greatly appreciate any guidance you can offer. I have been attempting to modify the .has-children class without success so far.
Thank you in advance for your help.
.has-children ul {
display: none;
width: 100%;
}
nav ul li:hover ul,
.has-children ul .has-children:hover ul {
display: flex;
flex-direction: column;
}
html,body,nav, ul, li, a, span{
margin:0; padding:0;
}
body{
font-family:helvetica;
font-size:16px;
}
nav ul {
background-color:#444;
display:flex;
flex-direction:column;
}
nav ul li{
list-style-type: none;
}
nav ul li a{
padding:.8rem 1rem;
display:block;
text-decoration: none;
color:#f9f9f9;
}
nav ul li:hover{
background:rgba(0,0,0, .25);
}
.arrow{
font-family:FontAwesome;
float:right;
}
.arrow-down::after{
content:"\f107";
}
.arrow-right::after{
content:"\f105";
}
@media only screen and (max-width:480px){
.has-children ul {
display: none;
width: 100%;
position: absolute;
}
nav ul li:hover ul,
.has-children ul .has-children:hover ul {
display: flex;
flex-direction: column;
}
.has-children ul li a {
padding-left: 2rem;
}
.has-children ul .has-children ul a {
padding-left: 3rem;
}
nav ul li {
list-style-type: none;
}
.arrow-down::after {
content: "\f107";
}
}
@media only screen and (min-width:480px){
nav ul{
flex-direction:row;
/* justify-content:flex-end; */
}
nav ul li{
position:relative;
flex:1 0 auto;
text-align:left;
}
.has-children ul, .has-children ul .has-children ul{
display:none;
width:100%;
position:absolute;
}
.has-children ul .has-children ul{
left:100%;
top:0;
}
nav ul li:hover ul, .has-children ul .has-children:hover ul{
display:flex;
flex-direction:column;
}
}<nav>
<ul>
<li class="has-children"><a href="#">Home
<span class="arrow arrow-down"></span>
</a>
<ul>
<li><a href="#">Item - 1 </a></li>
<li><a href="#">Item - 2 </a></li>
<li class="has-children"><a href="#">Item - 3
<span class="arrow arrow-down arrow-right"></span>
</a>
<ul>
<li><a href="#">Item - 1 </a></li>
<li><a href="#">Item - 2 </a></li>
<li><a href="#">Item - 3</a></li>
<li><a href="#">Item - 4 </a></li>
<li><a href="#">Item - 5 </a></li>
</ul>
</li>
<li><a href="#">Item - 4 </a></li>
<li><a href="#">Item - 5 </a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>