Animate.css IE

by soul_wish

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<ul class="menu animated rollIn">
  <li class="menu-item">
    <a class="menu-link" href="#">Home</a>
    <ul class="sub-menu">
      <li><a href="#">Sub menu 1</a></li>
      <li><a href="#">Sub menu 2</a></li>
      <li><a href="#">Sub menu 3</a></li>
    </ul>
  </li>
  <li class="menu-item">About</li>
  <li class="menu-item">Contact Us</li>
</ul>
<img src="https://s-media-cache-ak0.pinimg.com/736x/07/1b/d5/071bd55e56b43aa54021a4ff5b8e9591.jpg" alt="Unicorns!" class="image">

SCSS

.menu {
  position: relative;
  .menu-item {
    position: relative;
    display: inline-block;
    &:hover {
      .sub-menu {
        display: block;
      }
    }
  }
  .sub-menu {
    display: none;
    position: absolute;
    z-index: 500;
    left: 0;
    li {
      white-space: nowrap;
    }
  }
}

.image {
  position: relative;
  z-index: 50;
}