CodePen

HTML

            
              %ul
  %li.main
    ZERO
    %ul
      %li
        0.1
        %br/
        0.2
        %br/
        %img{src: "http://lorempixel.com/118/73/cats/"}/
  %li
    ONE
    %ul
      %li
        1.1
        %br/
        1.2
        %br/
        %img{src: "http://lorempixel.com/118/73/food/"}/
  %li
    TWO
    %ul
      %li
        2.1
        %br/
        2.2
        %br/
        %img{src: "http://lorempixel.com/118/73/people/"}/
  %li
    THREE
    %ul
      %li
        3.1
        %br/
        3.2
        %br/
        %img{src: "http://lorempixel.com/118/73/nature/"}/
            
          
!

CSS

            
              ul {
  margin: -60px 0 0 0;
  list-style: none;
  padding: 0;
  li {
    text-align: center;
    width: 60px;
    padding: 15px 20px;
    &:hover {
      background: #555;
      color: #fff;
    }  
    ul {
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
      left: 100px;
      width: 450px;
      display: none;
      opacity: 0;
      visibility: hidden;
      li {
        text-align: left;
        width: 450px;
        background: #555;
        display: block;
        color: #fff;
        &:hover {
          background: #666;
        }
      }
    }
    &:hover ul {
      display: block;
      visibility: visible;
      opacity: 1;
    }
  }
}

.main {
  visibility: hidden !important;
  ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    li {
      background: #fff;
      color: #000;
    }
  }
}  
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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