I've spent a full day trying to solve this issue, but unfortunately, I haven't been able to achieve any results. My goal is to create a menu with collapsible links that expand horizontally when hovering over the parent <li>. Essentially, it's like a dropdown menu but in a horizontal layout.
EDIT: *The "Uscite" and "Guide" links should appear next to "Blog", while the other links need to slide right and return to their original position when the mouse moves away.*
I attempted using the CSS properties display: none and display: block, which seemed to work, but this method prevented me from applying any transitional effects, resulting in a less-than-ideal appearance. Searching on Google didn't provide me with any helpful solutions either.
Could anyone lend a hand? You can access my code on this link: Codepen Link
.mpx_nav {
background-color: rgba(98, 98, 98, 1);
width: 100%;
height: 40px;
}
.nav_menu a{
display: inline-block;
padding: 0 1em;
text-decoration: none;
list-style: none;
color: #eee;
line-height: 40px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.nav_menu a:hover {
background-color: #eee;
color: #333;
font-weight: 700;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
/* background-color: rgba(98, 98, 98, 1);*/
background-color: #eee;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 5;
}
.dropdown-content a {
color: rgb(98, 98, 98);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgb(98, 98, 98);
color: #eee;
}
.dropdown:hover .dropdown-content {
display: block;
}<div class="mpx_nav">
<ul class="nav_menu container">
<a href="index.html"><li class="menu_item">Home</li></a>
<a href="portfolio.html"><li class="menu_item">Portfolio</li></a>
<div class="dropdown">
<a href="#"><li class="menu_item dropdown">Blog</li></a>
<div class="dropdown-content">
<a href="#">Uscite</a>
<a href="#">Guide</a>
</div>
</div>
<a href="#"><li class="menu_item">Su di Me</li></a>
<a href="contact.html"><li class="menu_item">Contatti</li></a>
</ul>
</div>Thank you so much for your anticipated assistance