<div class="menu">
<a href="#" class="trigger">meow</a>
<div class="sub">
<ul>
<li class="item">
<a href="#">meow 1</a>
<div class="sub-2">
<ul>
<li><a href="#">meow 1</a></li>
<li><a href="#">meow 2</a></li>
</ul>
</div>
</li>
<li><a href="#">meow 2</a></li>
<li><a href="#">meow 3</a></li>
<li><a href="#">meow 4</a></li>
</ul>
</div>
</div>
<style>
.menu { position: relative; display: inline-block; }
.sub, .sub-2 { display: none; position: absolute; background: #fff6; border: 1px solid #fff; width: 166px; border-radius: 15px; }
.sub { top: 100%; left: 0; }
.sub-2 { top: 0; left: 100%; }
.menu:hover > .sub, .item:hover > .sub-2 { display: block; }
ul { list-style: none; padding: 0; margin: 0; }
a { display: block; padding: 10px; color: #000; text-decoration: none; border-radius: 15px; }
a:hover { background: #fff9; }
.item { position: relative; }
</style>