在悬停上水平显示列表项目

Question

这里我有一个侧面导航栏，可以在悬停时进行扩展，但我一直试图让社交图标在悬停时水平显示而不是垂直显示。

我找不到与此主题相关的任何内容（除非我忽略了某些内容）。我可以得到一些帮助吗？

.navmenu { 
 
    top: 5%; 
 
    height: 90%; 
 
    width: 50px; 
 
    background-color: rgba(51, 51, 51, 0.80); 
 
    position: fixed; 
 
    border-top: 5px solid black; 
 
    border-bottom: 5px solid black; 
 
    transition: 0.5s ease; 
 
    z-index: 100; 
 
} 
 

 
.navextend { 
 
    border-left: 40px solid rgba(51, 51, 51, 0.80); 
 
    border-top: 30px solid transparent; 
 
    border-bottom: 30px solid transparent; 
 
    height: 79.5%; 
 
    left: 50px; 
 
    position: fixed; 
 
    transition: 0.5s ease; 
 
} 
 

 
#primary_nav_wrap { 
 
    z-index: 100; 
 
} 
 

 
#primary_nav_wrap ul { 
 
    list-style: none; 
 
    position: absolute; 
 
    text-align: left; 
 
    margin-top: 40px; 
 
    z-index: 100; 
 
    left: -15px; 
 
    transition: 0.5s ease; 
 
} 
 

 
#primary_nav_wrap ul li { 
 
    padding-right: 0px; 
 
} 
 

 
.current { 
 
    color: crimson; 
 
    font-size: 120%; 
 
} 
 

 
#primary_nav_wrap ul li { 
 
    padding: 15px 30px; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
#primary_nav_wrap ul a { 
 
    color: rgba(255, 255, 255, 0.80); 
 
} 
 

 
#primary_nav_wrap ul li:hover>a { 
 
    opacity: 0.5; 
 
} 
 

 
.navmenu img { 
 
    height: 30px 
 
} 
 

 
.navmenu img:hover { 
 
    opacity: 0.5; 
 
} 
 

 
.social { 
 
    bottom: 20px; 
 
    margin-left: 7px; 
 
    transition: 0.5s ease; 
 
} 
 

 
.social li { 
 
    text-align: center; 
 
} 
 

 
.navmenu:hover { 
 
    height: 98.5%; 
 
    top: 0px; 
 
    width: 120px; 
 
    background-color: rgba(38, 38, 38, 0.80); 
 
} 
 

 
.navmenu:hover .navextend { 
 
    left: 120px; 
 
    border-left: 70px solid rgba(38, 38, 38, 0.80); 
 
    border-top: 50px solid transparent; 
 
    border-bottom: 50px solid transparent; 
 
    height: 81.3%; 
 
} 
 

 
.navmenu:hover .social>img { 
 
    display: inline; 
 
} 
 

 
.navmenu:hover .menu { 
 
    margin-left: 40px; 
 
    font-size: 120%; 
 
} 
 

 
.navmenu:hover>#primary_nav_wrap ul li { 
 
    text-align: center; 
 
}

<div class="navmenu"> 
 
    <nav id="primary_nav_wrap"> 
 
    <ul class="menu"> 
 
     <li class="current">Home</li> 
 
     <a href="#"> 
 
     <li class="link">Services</li> 
 
     </a> 
 
     <li><a href="#">About<br> us</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">EN</a></li> 
 
    </ul> 
 
    <ul class="social"> 
 
     <li><img src="Images/_Gmail.svg.png"> </li> 
 
     <li><img src="Images/fb-art.png"></li> 
 
     <li><img src="Images/twitterlogo_1x.png"></li> 
 
    </ul> 
 
    <div class="navextend"> 
 
    </div> 
 
    </nav> 
 
</div>

Answer 1

就在你的CSS应用这些两行：

.navmenu:hover #primary_nav_wrap .social { white-space: nowrap; } 
.navmenu:hover #primary_nav_wrap .social li { display: inline-block; } 

/* spaces between icons: */ 
.navmenu:hover #primary_nav_wrap .social li { padding: 5px 5px; } 

.navmenu { 
 
    top: 5%; 
 
    height: 90%; 
 
    width: 50px; 
 
    background-color: rgba(51, 51, 51, 0.80); 
 
    position: fixed; 
 
    border-top: 5px solid black; 
 
    border-bottom: 5px solid black; 
 
    transition: 0.5s ease; 
 
    z-index: 100; 
 
} 
 

 
.navextend { 
 
    border-left: 40px solid rgba(51, 51, 51, 0.80); 
 
    border-top: 30px solid transparent; 
 
    border-bottom: 30px solid transparent; 
 
    height: 79.5%; 
 
    left: 50px; 
 
    position: fixed; 
 
    transition: 0.5s ease; 
 
} 
 

 
#primary_nav_wrap { 
 
    z-index: 100; 
 
} 
 

 
#primary_nav_wrap ul { 
 
    list-style: none; 
 
    position: absolute; 
 
    text-align: left; 
 
    margin-top: 40px; 
 
    z-index: 100; 
 
    left: -15px; 
 
    transition: 0.5s ease; 
 
} 
 

 
#primary_nav_wrap ul li { 
 
    padding-right: 0px; 
 
} 
 

 
.current { 
 
    color: crimson; 
 
    font-size: 120%; 
 
} 
 

 
#primary_nav_wrap ul li { 
 
    padding: 15px 30px; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
#primary_nav_wrap ul a { 
 
    color: rgba(255, 255, 255, 0.80); 
 
} 
 

 
#primary_nav_wrap ul li:hover>a { 
 
    opacity: 0.5; 
 
} 
 

 
.navmenu img { 
 
    height: 30px 
 
} 
 

 
.navmenu img:hover { 
 
    opacity: 0.5; 
 
} 
 

 
.social { 
 
    bottom: 20px; 
 
    margin-left: 7px; 
 
    transition: 0.5s ease; 
 
} 
 

 
.social li { 
 
    text-align: center; 
 
} 
 

 
.navmenu:hover { 
 
    height: 98.5%; 
 
    top: 0px; 
 
    width: 120px; 
 
    background-color: rgba(38, 38, 38, 0.80); 
 
} 
 

 
.navmenu:hover .navextend { 
 
    left: 120px; 
 
    border-left: 70px solid rgba(38, 38, 38, 0.80); 
 
    border-top: 50px solid transparent; 
 
    border-bottom: 50px solid transparent; 
 
    height: 81.3%; 
 
} 
 

 
.navmenu:hover .social>img { 
 
    display: inline; 
 
} 
 

 
.navmenu:hover .menu { 
 
    margin-left: 40px; 
 
    font-size: 120%; 
 
} 
 

 
.navmenu:hover>#primary_nav_wrap ul li { 
 
    text-align: center; 
 
} 
 
.navmenu:hover #primary_nav_wrap .social { white-space: nowrap; } 
 
.navmenu:hover #primary_nav_wrap .social li { display: inline-block; } 
 
.navmenu:hover #primary_nav_wrap .social li { padding: 5px 5px; }

<div class="navmenu"> 
 
    <nav id="primary_nav_wrap"> 
 
    <ul class="menu"> 
 
     <li class="current">Home</li> 
 
     <a href="#"> 
 
     <li class="link">Services</li> 
 
     </a> 
 
     <li><a href="#">About<br> us</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">EN</a></li> 
 
    </ul> 
 
    <ul class="social"> 
 
     <li><img src="Images/_Gmail.svg.png"> </li> 
 
     <li><img src="Images/fb-art.png"></li> 
 
     <li><img src="Images/twitterlogo_1x.png"></li> 
 
    </ul> 
 
    <div class="navextend"> 
 
    </div> 
 
    </nav> 
 
</div>