悬停时水平显示列表项

Question

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>