CodePen

HTML

            
              <nav>
	<ul>
		<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Blog</a>
    		<ul>
    			<li><a href="#">Sub menu 1Sub menu 1</a>
            <ul>
              <li><a href="#">Sub Sub 1</a></li>
              <li><a href="#">Sub Sub 2</a></li>
              <li><a href="#">Sub Sub 3</a></li>
            </ul>
          </li>
    			<li><a href="#">Sub menu 2</a>
            <ul>
              <li><a href="#">Sub Sub 1</a></li>
              <li><a href="#">Sub Sub 2</a></li>
              <li><a href="#">Sub Sub 3</a></li>
            </ul>
          </li>
    		</ul>
    	</li>
    	<li><a href="#">Store</a>
    		<ul>
    			<li><a href="#">Sub menu 1</a></li>
    			<li><a href="#">Sub menu 2</a>
            <ul>
              <li><a href="#">Sub Sub 1</a></li>
              <li><a href="#">Sub Sub 2</a></li>
              <li><a href="#">Sub Sub 3</a></li>
            </ul>
          </li>
    		</ul>
    	</li>
    	<li><a href="#">Contact</a></li>
    </ul>
</nav>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              nav{
  ul{
    margin: 0;
    padding: 0;
  }
  a {
    display: inline-block;
    padding:0 15px;
  }
  & > ul{
    text-align:center;
    position:relative;
    list-style: none;
    & > li{
      display:inline;
      position: relative;
      &:hover > ul{
        display:inline;
      }
      a{
        background:slategray;
        text-decoration:none;
        &:hover{
          color:white;
        }
      }
      & > ul{
        display:none;
        position:absolute;
        background:green;
        left: 0;
        top:18px;
        li{
          padding:0px;
          position:relative;
          & > ul{
            position: absolute;
            display: none;
            top: 0;
            left: 120px;
            & a{
              background: blue;
              color: white;
              &:hover{
                color:gray;
                background: white;
              }
            }
          }
          &:hover > ul{
            display:inline;
          }
          & a {
            display: block;
            background: green;
            padding: 10px;
            margin: 0; 
            width: 100px;
            &:hover{
              color:gray;
              background:white;
            }
          }
        }
      }
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................