Question

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

编辑： *“ Uscite”和“ Guide”链接显示在“博客”附近，其他链接当我移开鼠标时需要向右滑动并返回*

我尝试使用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

添加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-展开水平菜单

2 个答案: