<nav>
  <ul>
    <li><a href="#"><span class="fontawesome-user"></span></a>

      <ul>
        <li><a href="#"><span class="fontawesome-facebook"></span></a></li>
        <li><a href="#"><span class="fontawesome-twitter"></span></a></li>
        <li><a href="#"><span class="fontawesome-google-plus"></span></a></li>
        <li><a href="#"><span class="fontawesome-linkedin"></span></a></li>
      </ul>

    </li>
  </ul>
</nav>
@use postcss-preset-env;

/* CSS Document */

/* ---------- FONTAWESOME ---------- */
/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */

@import url(https://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* ---------- GENERAL ---------- */

body {
	background-color: #798498;
  display: grid;
  font-family: sans-serif;
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
  place-items: center;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- NAVIGATION ---------- */

nav {
	width: 60px;
}

nav ul {
	background-color: #505664;
	border-radius: 5px;
	display: inline-table;
	position: relative;
}

nav li {
	float: left;
}

nav a {
	color: #6daeb0;
	display: block;
	height: 45px;
	line-height: 45px;
	text-align: center;
	width: 60px;
}

nav a:hover{
	color: #fff;
}

nav ul li ul {
	background: #6daeb0;
	margin-top: 20px;
	padding: 5px 0;
	position: absolute;
}

nav ul li ul:before {
	background: #6daeb0;
	content: "";
	height: 8px;
	left: 50%;
  margin: -4px 0 0 -4px;
	position: absolute;
	top: 0;
	transform: rotate(45deg);
	width: 8px;
}

nav ul li ul li {
	float: none;
}

nav ul li ul li a {
	color: #fff;
}

nav ul li ul li a:hover {
	background-color: #5d9799;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.