title: Underline transition in menu
body: <p>I have a menu with a lava-lamp like underline that looks like this:<br>
  <img src="https://i.stack.imgur.com/18IKD.png" alt="Image"></p>
  
  <p>The underline slides between links when clicking on them. Try a jsfiddle <a href="http://jsfiddle.net/PnATm/" rel="nofollow noreferrer">HERE</a>.</p>
  
  <p>My only problem is that if you click outside the menu the underline reverts back to it's original state (18%). But I want the underline to stay on the last clicked link when you click outside the menu.</p>
  
  <p>I've tried <code>:visited</code> but it doesn't do anything.</p>