HTML5 / CSS - развернуть горизонтальное меню

Question

Я потратил около 1 дня, чтобы решить эту проблему, но я не могу достичь никаких результатов. Мне нужно создать меню с какой-то ссылкой, чтобы они свернулись, и когда я наведу курсор на родительский <li>, они появляются рядом с ним. Как раскрывающийся список, но в горизонтальном направлении.

EDIT: * Ссылки "Uscite" и "Руководство" появляются рядом с "Блогом", остальные ссылки нужно скользить вправо и вернуться, когда я вытащить мышь *

Я пытался использовать display: none и display: block, что, кажется, работает, но с этим методом я не могу применить какой-либо тип перехода, поэтому результат немного уродлив. Я пытался также с Google, но каждая найденная тема не помогает мне.

Кто-нибудь может мне помочь? В этой ссылке вы можете найти мой код: 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>

Заранее большое спасибо

Answer 1

.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;
    white-space:nowrap
}
.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;
}

<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="#">blog one</a>
                        <a href="#">blog two</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>

вам нужно добавить

white-space:nowrap

к вашему css для выравнивания контента в одну строку Вы также можете использовать этот код, если у вас возникнут какие-либо трудности с ним, не стесняйтесь спрашивать

Answer 2

добавить white-space:nowrap, чтобы сделать все ссылки в одну строку. взгляните на фрагмент ниже.

.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>