Display list items horizontally on hover - html

Question

Here I have a side navigation bar which expands on hover, but I have been trying to get the social icons to display horizontally instead of vertically on hover.
I couldn't find anything related to this subject (unless I overlooked something). Can I get some help please?
.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>About<br> us</li>
<li>Contact</li>
<li>EN</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

Just apply these two lines in your 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>About<br> us</li>
<li>Contact</li>
<li>EN</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>