HTML5/CSS - 扩展水平菜单

Question

我花了大约 1 天的时间来解决这个问题，但我无法得出任何结果。 我需要创建一个菜单，其中包含一些折叠的链接，当我将鼠标悬停在父级上时 <li>他们出现在它旁边。类似于下拉菜单，但在水平方向。

编辑: *“Uscite”和“指南”链接出现在“博客”附近，其他链接 当我移出鼠标时需要向右滑动并返回 *

我尝试使用 display: none和 display: block ，这似乎可行，但使用这种方法我无法应用任何类型的过渡，因此结果有点难看。 我也尝试过使用谷歌，但找到的每个线程都对我没有帮助。

谁能帮帮我？ 在此链接中，您可以找到我的代码: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

添加 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>