HTML5 / CSS - Expand Horizontal Menu

Question

i spent about 1 day to resolve this problem, but i cannot reach any results. i need to create a menu with some link that they are collapsed and when i hover on the parent <li> they appear next to it. Like a dropdown but in horizontal direction.

EDIT: *The "Uscite" and "Guide" links appear near "Blog", the others links need to slide right and come back when i move out the mouse *

i tried to use the display: none and display: block, that seems to work but with this method i cannot apply any type of transition, so the result is a little bit ugly. I tried also with google, but every thread found doesn't help me.

Can anyone help me? In this link you cand find my code: 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 in advance

Answer 1

add white-space:nowrap to make all links in one line. have a look at below snippet.

.mpx_nav {
    background-color: rgba(98, 98, 98, 1);
    width: 100%;
    height: 40px;
}
.nav_menu li{
  display:inline-block;
  vertical-align : top
}
.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;
    vertical-align : top
}
.nav_menu a:hover {
    background-color: #eee;
    color: #333;
    font-weight: 700;
}
.dropdown {
    /*position: relative;*/
    /*display: inline-block;*/
    white-space:nowrap;
}
.dropdown-content {
    display: inline-block;
    vertical-align : top
    /*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;
    width:0;
    overflow:hidden;
    -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;
}
.dropdown-content a {
    /*color: rgb(98, 98, 98);*/
    /*padding: 12px 16px;*/
    text-decoration: none;
    
}
.dropdown-content a:hover {
    background-color: rgb(98, 98, 98);
    color: #eee;
}
.dropdown:hover .dropdown-content {
    /*display: inline-block;*/
    width:100%
}

<div class="mpx_nav">
			<ul class="nav_menu container">
        <li class="menu_item"><a href="index.html">Home</a></li>
				<li class="menu_item"><a href="portfolio.html">Portfolio</a></li>
                <li class=" menu_item dropdown">
                    <a href="#">Blog</a>
                    <div class="dropdown-content">
                        <a href="#">Uscite</a>
                        <a href="#">Guide</a>
                    </div>
                </li>  
        
				<li class="menu_item"><a href="#">Su di Me</a></li>
				<li class="menu_item"><a href="contact.html">Contatti</a></li>
			</ul>
		</div>