JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<ul class="icon1 sub-icon1 profile_img">
<li><a class="active-icon c1" href="#">link </a>
						<ul class="sub-icon1 list">
						  <div class="product_control_buttons">
						  	<a href="#"><img src="images/edit.png" alt=""></a>
						  		<a href="#"><img src="images/close_edit.png" alt=""></a>
						  </div>
						   <div class="clear"></div>
						  <li class="list_img"><img src="images/1.jpg" alt=""></li>
						  <li class="list_desc"><h4><a href="#">velit esse molestie</a></h4><span class="actual">1 x
                          $12.00</span></li>
						  <div class="login_buttons">
							 <div class="check_button"><a href="checkout.html">Check out</a></div>
							 <div class="login_button"><a href="login.html">Login</a></div>
							 <div class="clear"></div>
						  </div>
						  <div class="clear"></div>
						</ul>
					 </li>
				   </ul>

CSS

.icon1:before,.icon1:after {
	content: "";
	display: table;
}
.icon1:after {
	clear: both;
}
ul.icon1 {
	float: left;
	zoom: 1;
	list-style: none;
	padding: 0;
	margin-left:25%;
}
.icon1 li {
	float: left;
	position: relative;
}
.icon1 li:last-child{
	border-right:none;
}
.icon1 li:hover > a {
	color: #fafafa;
}
*html .icon1 li a:hover { /* IE6 only */
	color: #fafafa;
}
.icon1 ul {
	width:300px;
	margin: 20px 0 0 0;
	_margin: 0;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top:67px;
	z-index: 1;
	right: -140px;
	background: #ffffff;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	box-shadow: 0 0 10px #AAA;
	-webkit-box-shadow: 0 0 10px #AAA;
	-moz-box-shadow: 0 0 10px #AAA;
	-o-box-shadow: 0 0 10px #AAA;
}
.icon1 li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
	z-index: 9999;
}
.icon1 ul ul {
	top: 6px;
	left: 158px;
	margin: 0 0 0 20px;
}
.icon1 ul li {
	/*--float: none;--*/
	display: block;
	border: 0;
}
.icon1 ul li:first-child{
	border-top:none;
}
.icon1 ul li:first-child a{
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-o-border-top-left-radius: 5px;
}
.icon1 ul li:last-child {   
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;    
}
.icon1 ul a {    
	_height: 10px; /*IE6 only*/
	white-space: nowrap;
	float: none;
	text-transform: none;
}
.active-icon{
	display: block;
}
.icon1 ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 45%;
	top: -30px;
	border-left: 10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:10px solid #f0f0f0;
}
.icon1 ul ul li:first-child a:after {
	left: -100px;
	top: 0%;
	margin-top: -6px;
	border-left: 0;	
	border-bottom:20px solid transparent;
	border-top: 20px solid transparent;
	border-right:20px solid #323757;
}