Edit in JSFiddle

<nav role="navigation" class="site-navigation main-navigation">
	<div class="menu">
        <ul>
            <li><a href="#">1 Level</a></li>
            <li><a href="#">1 Level </a></li>
            <li><a href="#">1 Level</a></li>
            
            <li class="page_item_has_children current_page_ancestor current_page_parent">
                <a href="#">2 Levels</a>
                <ul class="children">
                    <li><a href="#">2 Levels</a></li>
                    <li><a href="#">2 Levels</a></li>
                    <li><a href="#">2 Levels</a></li>
                    <li><a href="#">2 Levels</a></li>
                </ul>
            </li>
            <li class="page_item_has_children current_page_ancestor current_page_parent">
                <a href="#"> Has 3 levels</a>
                <ul class="children">
                    <li><a href="#">Level 2 A </a></li>
                    <li><a href="#">Level 2 B </a></li>
                    <li><a href="#">Level 2 C has children</a>
                        <ul>
                            <li><a href="#">Level 3 A </a></li>
                            <li><a href="#">Level 3 B </a></li>
                       </ul>
                   </li>
               </ul>
            </li>
        </ul>
      </div>		
</nav>
a {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  text-decoration: none;
    &:hover{
        opacity: 0.6;
    }
}

nav {
    font-family:Arial, sans-serif;
    font-weight: 200;
    background: #242424;
    color: #888888;
    text-transform: lowercase;
    float: left;
    padding:15px;

    .menu {
      margin-top:10px;
      
      ul {
        list-style: none;
        margin: 0;
        position: relative;
        float: left;
        padding:0;

        a {
          display:block;
          margin-right: 10px;
          color: #888888 !important;
          font-size: 14px;
          border-bottom: 1px #888888 dotted;
        }

        li {
          position:relative;
          float:left;
          margin:0;
          padding:0;
        }

        ul {
          visibility: hidden;
          transition: visibility 0s linear 0.5s,opacity 0.5s linear;
          opacity:0;
          position: absolute;
          top: 100%;
          left: 0;
          padding: 0;
          background: #242424;
          z-index:999;

          li {
            float:none;
            width: 200px;
          }

          a {
            line-height: 100%;
            padding: 10px 15px;
          }

          ul {
            top: 5px;
            left: -100%;
          }
        }

        li:hover > ul {
          visibility: visible;
          opacity:1;
          transition-delay:0s;
        }  
      }
    }
}