Cacher is the code snippet organizer for pro developers

<ul>
  <li>Lorem</li>
  <li>Ipsum
       <ul>
          <li>Lorem</li>
          <li>Ipsum</li>
        	<li>Dolor</li>
    	</ul></li>
  <li>Dolor</li>
  <li>Sit
  		<ul>
          <li>Lorem</li>
        	<li>Ipsum</li>
    	</ul></li>
  <li>Amet</li>
  
  <a class="self-promotion" href="http://splashfish.de" target="_blank">by SplashFish.de</a>
<ul>

@import url(http://fonts.googleapis.com/css?family=Bitter);

body {
  background-image: url(http://subtlepatterns.com/patterns/wood_pattern.png);
}

* { box-sizing: border-box; }

ul {
  display: block;
  position: relative;
  background: #1B5EB5;
  border-radius: 5px;
  margin: 30px;
  box-shadow: 1px 1px 1px darken(#bebebe, 00%),
        			2px 2px 1px darken(#bebebe, 10%),
    					3px 3px 1px darken(#bebebe, 20%);
  
  font-family: 'Bitter', serif;
  
  a.self-promotion {
  	color: lighten(#1B5EB5, 10%);
    font-style: italic;
    
    position: absolute;
    right: 30px;
    top: 33%;
    
    transition: .4s;
    text-decoration: none;
    
    &:hover {
    	color: #FFF;
    }
  }
  
  li {
    display: inline-block;
    position: relative;
    padding: 10px 20px;
    margin: 5px;
    color: #FFF;
    border-radius: inherit;
    transition-duration: .3s;
    
    &:hover {
      background-color: lighten(#1B5EB5, 10%);
      
      ul {
        display: block;
   		}
    }
    
   & > ul {
    	display: none;
      position: absolute;
      top: 20px;
      left: -30px;
      padding: 0 10px 0 0;
      background-color: lighten(#1B5EB5, 10%);
      
      &::before {
        margin-top: -20px;
        display: block;
      	content:"";
        height: 20px;
        width: 100%;
      }
      
      li {
      	display: inline-block;
        width: 100%;
        
        &:hover {
        		background-color: #1B5EB5;
        }
      }
    }
  }
}