<ul id="drop-nav" class="drop-nav">
  <li><a href="#">&#xe116; Buy Now</a></li>
  <li><a href="#">&#xe116; More Buying Options &#9662;</a>
    <ul>
      <li><a href="#">Buy From Amazon</a></li>
      <li><a href="#">Buy From Amazon UK</a></li>
      <li><a href="#">Buy From Amazon FR &#9656;</a>
        <ul>
          <li><a href="#">First Book Title</a></li>
          <li><a href="#">Second Book Title</a></li>
          <li><a href="#">Third Book Title</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.drop-nav li {
	position: relative;
	float: left;
}
.drop-nav li > ul {
	position: absolute;
	left:-999em;
	width:100%;
	top:0;
	transition:top .5s ease;
}
.drop-nav ul ul {
	transition:transform .5s ease, opacity .3s ease;
	transform:translateX(0);
	opacity:0;
}
.drop-nav a {
	display: block;
	background: #f3f3f3;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	white-space: nowrap;
	color: #666666;
	border: 1px solid #fff;
	line-height:1.2em;
}
.drop-nav a:hover {
	background: #ccc;
}
.drop-nav li:hover > ul {
	left:0;
	top:100%;
}
.drop-nav li li:hover > ul {
	left:0;
	transform:translateX(100%);
	top:0;
	opacity:1;
}
.drop-nav ul li {
	float: none;
}
.drop-nav li:hover > a {
	background: #ccc;
}
#drop-nav ul li {
	border-top: none;
}