<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
</style>
</head>
<body>
<h2>Example for CSS Horizontal drop-down menu social sharing</h2><br>
<ul>
<li> <a href="#"><i _ngcontent-grk-c55="" aria-hidden="true" class="heart fa fa-heart-o"></i></a></li>
<li>
<a href="#"><i _ngcontent-grk-c55="" aria-hidden="true" class="heart fa fa-heart-o"></i></a>
<ul>
<li><a href="#"><i _ngcontent-grk-c55="" aria-hidden="true" class="heart fa fa-heart-o"></i></a></li>
<li><a href="#"><i _ngcontent-grk-c55="" aria-hidden="true" class="heart fa fa-heart-o"></i></a></li>
<li><a href="#"><i _ngcontent-grk-c55="" aria-hidden="true" class="heart fa fa-heart-o"></i></a></li>
<li><a href="#"><i _ngcontent-grk-c55="" aria-hidden="true" class="heart fa fa-heart-o"></i></a></li>
</ul>
</li>
</ul>
</body>
</html>
ul {
list-style: none;
padding:0;
margin:0;
}
ul li {
display: block;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
font-size:20px;
padding:5px;
text-decoration: none;
color: black;
}
ul li a:hover {
background:deepskyblue;
color:white;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
color:black;
}
/*li:hover li a:hover {*/
/* width:100px;*/
/*}*/
