A coded spy menu

• N A T H A N   H A L E
• B E L L E   B O Y D  
• M A T A   H A R I    
• A L G E R   H I S S  
• K I M   P H I L B Y  

Information

Just for fun, although it may have some serious application, a coded menu of spies.

Just hover your mouse over any of the squares, lettered or otherwise, to unscramble each line into a well known spy.

Perhaps this may be a way of displaying a code for entry of information into forms etc. but then again, maybe not ;o)

This is just a css styled unordered list and will degrade back to this for text only browsers.

===================

#spy {
  padding:0;
  list-style-type:none;
  width:19.5em;
  margin:5em auto;
  }
#spy li {
  width:16.5em;
  position:relative;
  height:1.5em;
  font-size:1.2em;
  }
#spy li a {
  text-decoration:none;
  cursor:pointer;
  }
#spy li a em {
  font-style:normal;
  color:#000;
  display:block;
  width:1.1em;
  background:#eee;
  position:absolute;
  top:0;
  text-align:center;
  border:0.3em solid #697210;
  }
#spy .a1 {left:13.5em;}
#spy .a2 {left:6em;}
#spy .a3 {left:7.5em;}
#spy .a4 {left:10.5em;}
#spy .a5 {left:15em;}
#spy .a6 {left:3em;}
#spy .a7 {left:1.5em;}
#spy .a8 {left:4.5em;}
#spy .a9 {left:9em;}
#spy .a10 {left:12em;}
#spy .a11 {left:0em;}

#spy .dk {background:#e09222;}
#spy li a:hover {background:#ccc;}
#spy li a:hover .a1 {left:0;}
#spy li a:hover .a2 {left:1.5em;}
#spy li a:hover .a3 {left:3em;}
#spy li a:hover .a4 {left:4.5em;}
#spy li a:hover .a5 {left:6em;}
#spy li a:hover .a6 {left:7.5em;}
#spy li a:hover .a7 {left:9em;}
#spy li a:hover .a8 {left:10.5em;}
#spy li a:hover .a9 {left:12em;}
#spy li a:hover .a10 {left:13.5em;}
#spy li a:hover .a11 {left:15em;}