CodePen

HTML

            
              <div class="wrapper">
  <ul class="top">
    <li><a href="#" class="arrow">&uarr;</a>
    <a href="#" class="text">Top</a></li>
      </ul>
  <!--top ends-->
  <ul class="left">
    <li><a href="#" class="arrow">&larr;</a>
      <a href="#" class="text">Left</a>      
    </li>
       
  </ul>
  <!--left ends-->
  <ul class="right">
     <li><a href="#"class="text">Right</a>  
       <a href="#" class="arrow">&rarr;</a>
    </li>
    
    
    
  </ul>
  
</div>
<!--wrapper ends-->
            
          
!
via HTML Inspector

CSS

            
              .wrapper{display:block; width:960px; margin:100px auto; padding:10px;}
/*top starts*/
.top{display:block; float:left; margin:0; padding:0; list-style:none; position:relative;}
.top:after{clear:both; content:''; display:block;}
.top li a{text-decoration:none; position:relative;}
.top li{position:absolute; bottom:0;}
.top li a.arrow{display:inline-block; border: 1px solid blue;}
.top li a.text{display:block; border: 1px solid red; bottom:0px; width:50px; text-align:center;}

/*top hover */
.top li:hover a.text{padding-top:20px;}
.top li:hover{bottom:0;}

/*left starts */
.left{display:block; float:left; margin:0; padding:0; list-style:none; clear:both; position:relative;}
.left:after{clear:both; content:''; display:block;}

.left li a{text-decoration:none; position:relative;}

.left li a.arrow{display:block; border: 1px solid blue; float:left;}
.left li a.text{display:block; border: 1px solid red; width:50px; float:left; text-align:center;}
.left li{position:relative; left:-18px;}
/* left hover states */
.left li:hover a.text{padding-left:20px;}
.left li:hover{left:-38px;}
/* left ends */

.right{display:block; float:left; margin:0; padding:0; list-style:none; clear:both; position:relative;}
.right:after{clear:both; content:''; display:block;}
.right li a{text-decoration:none;}
.right li a.text{display:block; border: 1px solid red; width:50px; float:left; text-align:center;}
.right li a.arrow{display:block; border: 1px solid blue; float:left;}

/* hover right */
.right li:hover a.text{padding-right:20px;}




            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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