HTML5 / CSS - 展开横向菜单

Question

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

编辑： *"Uscite" 和 "Guide" link 出现在 "Blog" 附近，其他 link 出现鼠标移出需要右滑回来*

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

谁能帮帮我？在这个 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>

非常感谢您

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>

Answer 2

.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 以在一行中对齐内容如果您遇到任何困难，也可以使用此代码，请随时询问

HTML5 / CSS - 展开横向菜单

HTML5 / CSS - Expand Horizontal Menu

html

css

expand

menu

collapse